Why should you care?

Real apps always branch: hide the dashboard until login, show a spinner while fetching, show an error message on failure.

See it live — copy this example

Paste into src/App.jsx (or the file noted in the steps). Save and watch the browser update.

function Greeting({ isLoggedIn, name }) {
  if (!isLoggedIn) {
    return <p>Please log in.</p>;
  }
  return <p>Welcome, {name}!</p>;
}

Run Example »

Edit the code and click Run to see the result update live.

What happened?

• Early return is the clearest pattern for two big branches.
• For small inline cases you can use condition && or a ternary.

Try it yourself

1. Add a boolean state isOpen and toggle a panel.
2. Show a loading message when data is null.
3. Try: {error &&

   {error}

   }
4. Change text or labels in the example and save — watch the browser update.
5. Break the code on purpose (remove a bracket), read the error message, then fix it.

Remember

Use if/return, &&, or ternary to show/hide UI. Keep conditions readable — extract sub-components if needed.