javascript / beginner
Snippet
Conditional Rendering with Ternary Operators
The ternary operator is a concise way to perform conditional rendering. It evaluates a condition and returns one of two JSX elements based on whether the condition is true or false.
snippet.js
javascript
1
2
3
4
5
6
7
function AuthStatus({ isLoggedIn }) {return (<div>{isLoggedIn ? <p>Welcome back!</p> : <p>Please log in.</p>}</div>);}
react
Breakdown
1
{isLoggedIn ? ... : ...}
If isLoggedIn is true, the first element is rendered; otherwise, the second element is rendered.