0
155
ViewsHow 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.
3 answers
Answer question0
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>
)}
0
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 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>
</>
);
}
0
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}