How to write JS code inside of the return method in React.js

Question

There is a variable named "checkPwd" that has 3 optional values. "correct", "empty", and "invalid" The return method should return various HTML elements based on this variable. Like this.

  <FormControl>
    <Stack style={styles.stack}>
      <Input
        type="password"
        placeholder="Confirm Password"
        isInvalid={checkPwd == "correct" ? false : true}
      />
      {
        if (checkPwd == "empty") {
          <FormControl.ErrorMessage>
            Please confirm password.
          </FormControl.ErrorMessage>
        } else if(checkPwd == "invalid") {
          <FormControl.ErrorMessage>
            Password is not strong enough.
          </FormControl.ErrorMessage>
        }
      }
    </Stack>
  </FormControl>

But this code occurs an error while compiling. I hope your kind cooperations.

Does this answer your question? [if-else statement inside jsx: ReactJS](https://stackoverflow.com/questions/44046037/if-else-statement-inside-jsx-reactjs) — Emile Bergeron, Aug 27 '21 at 04:50

score 3 · Accepted Answer · answered Aug 27 '21 at 03:18

3

You can add condition like this:

    {checkPwd == "empty" && (
      <FormControl.ErrorMessage>
        Please confirm password.
      </FormControl.ErrorMessage>
    )}
    {checkPwd == "invalid" && (
      <FormControl.ErrorMessage>
        Password is not strong enough.
      </FormControl.ErrorMessage>
    )}

answered Aug 27 '21 at 03:18

Viet

12,133
2
15
21

https://reactjs.org/docs/conditional-rendering.html#inline-if-with-logical--operator – Yair Cohen Aug 27 '21 at 03:20

ksav · Answer 2 · 2023-02-12T02:14:59.827

You could extract your logic out to a function, they you can write it in this if/else style. Then in the JSX you would just execute the function like {someFunction()}

export default function App() {
  const checkPwd = "empty";

  const someFunction = () => {
    if (checkPwd === "empty") {
      return <div>Please confirm password.</div>;
    } else if (checkPwd === "invalid") {
      return <div>Password is not strong enough.</div>;
    }
    return null;
  };

  return (
    <>
      <div>
        <input type="password" placeholder="Confirm Password" />
        {someFunction()}
      </div>
    </>
  );
}

However a more common approach in React would be to have a ternary operator inline in the JSX to control what renders based on the condition.

export default function App() {
  const checkPwd = "empty";

  return (
    <>
      <div>
        <input type="password" placeholder="Confirm Password" />
        {checkPwd === "empty" ? (
          <div>Please confirm password.</div>
        ) : checkPwd === "invalid" ? (
          <div>Password is not strong enough.</div>
        ) : null}
      </div>
    </>
  );
}

And finally, if you are just mapping validation error codes to string values (Perhaps you received an ugly error code from the server but want to display something more human readable to the user), I will leave this approach here for you to consider.

const errorCodeMap = {
  empty: "Please confirm password",
  weak: "Password is not strong enough",
  short: "Password is not long enough",
  unmatched: "Both password values must match",
  missingNumber: "Password must incliude a number"
};

export default function App() {
  const errorCode = "short";

  return (
    <>
      <div>
        <input type="password" placeholder="Confirm Password" />
        {!!errorCode && <div>{errorCodeMap[errorCode]}</div>}
      </div>
    </>
  );
}

score 0 · Answer 3 · answered Aug 27 '21 at 03:20

That is because jsx does not support if else statements instead you can use the ternary operator

{checkPwd == "empty" ? (
   <FormControl.ErrorMessage>
      Please confirm password.
   </FormControl.ErrorMessage>
) : checkPwd == "invalid" ? (
   <FormControl.ErrorMessage>
      Password is not strong enough.
   </FormControl.ErrorMessage>
) : null}

How to write JS code inside of the return method in React.js

3 Answers3