Conditional Rendering

Example

Show different UI depending on state.

import { useState } from 'react';

export default function App() {
  const [loggedIn, setLoggedIn] = useState(false);
  const messages = 3;
  return (
    <div>
      {loggedIn ? <p>Welcome back!</p> : <p>Please log in.</p>}
      {loggedIn && messages > 0 && <p>You have {messages} new messages.</p>}
      <button onClick={() => setLoggedIn(!loggedIn)}>{loggedIn ? 'Log out' : 'Log in'}</button>
    </div>
  );
}

Result