Conditional Rendering
React lets you render content conditionally using JavaScript operators like if
, ternary ( ? : )
, or &&
.
function Greeting({ isLoggedIn }) {
return (
<div>
{isLoggedIn ? <p>Welcome back!</p> : <p>Please log in.</p>}
</div>
);
}
- Use ternary expressions for inline conditionals.
&&
is useful for rendering something only when a condition is true.