Ternary Rendering

Part of the Fundamentals section of Coddy's React journey — lesson 33 of 42.

JSX braces can't hold an if statement, but they hold the ternary operator perfectly, and it covers almost every either/or on a screen:

{isLoggedIn ? 'Welcome back!' : 'Please log in'}

Condition first, then the value for true, then the value for false. Both sides can be full JSX elements:

{isLoggedIn
    ? <p>Welcome back!</p>
    : <button>Log in</button>}

Pair it with state and the page switches live: flip the boolean, React re-renders the other branch.

Challenge

Easy

Build a login status line.

Add boolean state loggedIn, starting false.
The button (id="login") flips it on every click.
The paragraph (id="status") shows Welcome back! when logged in and Please log in otherwise, with a ternary.

Try it yourself

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="styles.css" />
    </head>
    <body>
        <div id="root"></div>
        <script type="module" src="main.jsx"></script>
    </body>
</html>