BeginnerCoder
Donate← React Foundations
7 / 25
Lesson 7 — Conditional rendering
Show different UI by state
JSX is JavaScript, so you choose what to show with normal expressions. The ternary condition ? a : b picks one of two elements; condition && element shows something only when the condition is true. Put either one inside {…}.
{isLoggedIn ? <p>Welcome back</p> : <p>Please sign in</p>}
{hasError && <p>Something went wrong</p>}
Why it matters: loading spinners, error messages and logged-in menus all depend on conditions.
Want it another way?
Task
Show "Off" at first and "On" after you click Toggle.
Test your knowledge
Test your knowledgeA quick 3-question quiz on this lesson — instant feedback.