Conditional Rendering not responding in React Native

Blake Cross 0
Viewed 24

I am having trouble with my conditional statement. It only ever renders true even when it is false. I have a jobs list page that when pressed sets the 'selectedJob.' That job is then presented in a modal where you can save the job or remove it. But if the job is already been saved then I need the correct button to be displayed.

  const [saved, setSaved] = useState(null);

  useEffect(() => {
    setSaved(selectedJob.saved);
  }, [selectedJob]);

            {saved ? (
              <Button
                onPress={() => removeJob(selectedJob)}
                btnTxt={"Saved"}
              />
            ) : (
              <Button
                onPress={() => saveJob(selectedJob)}
                btnTxt={"Save"}
              />
            )}
expo conditional-statements react-native reactjs
1 Answers

If you use boolean as a string like 'true' and 'false' it compares as string not boolean so as long as it's value is not null or undefined or '' it will be considered as true so either you should change your server to use boolean values instead of string or you can match string in condition like

        {saved == 'true' ? (
          <Button
            onPress={() => removeJob(selectedJob)}
            btnTxt={"Saved"}
          />
        ) : (
          <Button
            onPress={() => saveJob(selectedJob)}
            btnTxt={"Save"}
          />
        )}
Bhavya Koshiya0
Related