javascript / beginner
Snippet
Conditional Rendering with Ternary
Conditional rendering in React works just like JavaScript conditions. The ternary operator (?) is a concise way to render different elements based on a boolean value.
snippet.js
javascript
1
2
3
4
5
return (<div>{isLoggedIn ? <LogoutButton /> : <LoginButton />}</div>);
react
Breakdown
1
isLoggedIn ?
Checks if the variable 'isLoggedIn' is true.
2
: <LoginButton />
The code after the colon is executed if the condition is false.