Conditional Rendering

Relax. We'll talk through this in plain words — no textbook voice.

Conditional rendering means showing different UI depending on a condition — show the dashboard if the user is logged in, show a sign-in button if not. You can write this kind of app logic in React using plain JavaScript conditions.

jsx

function Greeting({ isLoggedIn, userName }) {
  return (
    <div>
      {isLoggedIn ? (
        <h1>Welcome back, {userName}!</h1>
      ) : (
        <h1>Please sign in to continue.</h1>
      )}
    </div>
  );
}

function App() {
  return <Greeting isLoggedIn={true} userName="Sai" />;
}

If `isLoggedIn` is true, a welcome message is shown; if false, a sign-in message is shown instead. You'll use this pattern all the time for auth UI, empty states, and loading states.

You should see

The heading `Welcome back, Sai!` will appear.

Info

You can use a ternary operator inside JSX like this: `{condition ? trueUI : falseUI}`.

Easy traps

Cramming too many conditions into a single line of JSX makes it hard to maintain. Split that UI logic out into its own component.