javascript / beginner
Snippet
Conditional UI with the Ternary Operator
The ternary operator (? :) allows you to render different UI elements based on a condition directly inside your JSX.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
function WelcomeMessage(props) {const isLoggedIn = props.isLoggedIn;return (<div>{isLoggedIn? <h1>Welcome back!</h1>: <h1>Please sign in.</h1>}</div>);}
react
Breakdown
1
{isLoggedIn ? <h1>...</h1> : <h1>...</h1>}
If 'isLoggedIn' is true, the first element is rendered; otherwise, the second one is rendered.