When will you use this?

You use this in every component you write from your first app to your tenth year on the job.

• Product pages, login forms, and todo lists all use components, props, and state.
• When a user types in a search box, React state holds the text and filters a list.

Real-world: Toolliyo login gate

Toolliyo shows marketing homepage to guests and course dashboard to logged-in students. One App shell switches entire layout based on auth state.

Production-style code

function AppShell({ user, children }) {
  if (user === undefined) {
    return <FullPageSpinner label="Checking session…" />;
  }
  if (!user) {
    return <LoginPage />;
  }
  return (
    <Layout user={user}>
      <StudentDashboard user={user} />
      {children}
    </Layout>
  );
}

What happens in production: Clear auth branches prevent showing grades or payment pages to anonymous visitors — a legal and security requirement for LMS products.

Lesson example (start here)

Copy this smaller example first. Once it works, compare it with the real-world code above.

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

Line-by-line walkthrough

How it works (big picture)

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

Do this on your computer

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

   {error}

   }
4. Read the real-world section and name which part of the app uses this topic.
5. Run the example locally and confirm the same behavior in the browser.
6. Change one value in the example (text, initial state, or URL) and predict what will happen before you save.

Experiments — try changing this

• Change text or labels in the example and save — watch the browser update.
• 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.

Common questions