CODEWITHSUNDEEP
javascriptreactjsreact-nativejsx
ComMa915
ComMa915

Reputation: 103

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

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.

Upvotes: 2

Views: 5851

Answers (3)

ksav
ksav

Reputation: 20830

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

Edit upbeat-leftpad-ludm7

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

Edit smoosh-platform-pt1n6

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

Edit charming-tesla-mugo3

Upvotes: 3

sairaj
sairaj

Reputation: 413

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}

Upvotes: 0

Viet
Viet

Reputation: 12787

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>
    )}

Upvotes: 3

Related Questions