javascript - How to write JS code inside of the return method in React.js - Stack Overflow

admin管理员组

文章数量:1400303

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 piling. I hope your kind cooperations.

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 piling. I hope your kind cooperations.

• javascript
• reactjs
• react-native
• jsx

Share Improve this question Follow asked Aug 27, 2021 at 3:15 ComMa915ComMa915 10322 silver badges1010 bronze badges 1

• 1 Does this answer your question? if-else statement inside jsx: ReactJS – Emile Bergeron Commented Aug 27, 2021 at 4:50

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 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>
    )}

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 mon 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>
    </>
  );
}

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}

本文标签： javascriptHow to write JS code inside of the return method in ReactjsStack Overflow