React · Junior · Question 52 of 75

How do you render one of two elements depending on a condition?

✓Correct answer: With a ternary: {isLoggedIn ? <Profile /> : <LoginButton />}
2With <if condition={isLoggedIn}>
3With a switch statement directly inside JSX

Explanation

JSX accepts expressions, so ? : works inline. For several branches, compute the element in a variable or a helper function before return.

Further reading

react.dev: Conditional Rendering ↗

Test yourself

Take the React · Junior quiz: questions and options are shuffled, and you get a review of your mistakes at the end.