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>