How do you conditionally render elements in React?

beginner

Re-explain

Use plain JavaScript to choose what to render. There are three common patterns.

A ternary, condition ? <A /> : <B />, picks between two elements.

function Greeting({ isLoggedIn }) {
  return (
    <div>
      {isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please log in.</h1>}
    </div>
  );
}

Logical AND, condition && <A />, renders an element or nothing.

function Notification({ hasMessages }) {
  return (
    <div>
      {hasMessages && <p>You have new messages!</p>}
    </div>
  );
}

An if and else statement with early returns handles bigger branches.

function UserStatus({ user }) {
  if (user.isAdmin) {
    return <AdminPanel />;
  } else if (user.isLoggedIn) {
    return <UserPanel />;
  } else {
    return <LoginForm />;
  }
}

Keep the left side of && a boolean. If it's the number 0, React renders 0 instead of nothing.

Rewriting in plainer words…

This answer doesn't lend itself to a diagram - it reads best . No credits were charged.

Why there's no diagram: “”

The interactive diagram is below the answer - jump to diagram ↓ · Below it, the related concept . Jump to it ↓

The diagram below the answer is the concept . Jump to it ↓

Tailored explanation · switch back to · ·

What should the new diagram focus on?

Guided practice for React One question at a time. Answer out loud, get graded, see what you missed.

How well did you know this?

AI:

Saved in this browser - sign in to keep your review list.

How should your speech become text?

Listening… your words appear above as you speak - tap Stop when you're done.

Recording · cr - tap Stop & transcribe when you're done.

Transcribing with AI…

Voice:

Keep going - a few more words and AI can grade it.

Interview lens How interviewers actually use this question

Likely follow-ups

What's the difference between hiding a component with CSS and not rendering it at all? Not rendering unmounts it, so its state is lost and its effects clean up. CSS hiding keeps it mounted with its state, and it still renders.
If a ternary swaps <LoginForm /> for <SignupForm />, what happens to the state inside the form? A different type at the same spot means unmount and remount, so state resets. The same type keeps its state unless you change its key.
How would you render one of five views based on a status value without nesting ternaries? Use an object that maps each status to a component, or a switch with early returns. Mention a fallback for an unknown status.
Can you call a hook inside an if block so it only runs when a condition is true? No. Hooks must run in the same order on every render. Put the condition inside the hook, or move the hook into a child you render conditionally.

What you can say

React has no special template syntax for conditions, so I use plain JavaScript to decide what the component returns.
When I'm choosing between two things, I put a ternary in the JSX, like a welcome heading if the user is logged in and a login prompt if not.
When it's show or nothing, I use logical AND, so hasMessages && the message paragraph renders that paragraph or nothing at all.
For bigger branches, like admin versus logged-in user versus logged out, I use if and else with early returns before any JSX.
Watch the left side of &&, because if it's the number 0 and not a boolean, React renders a 0 on the page instead of nothing.

Weak answers to avoid

Only knows the ternary The interviewer wants to hear when each pattern fits. Use a ternary for two options, && for show or nothing, and early returns when there are several branches.
Misses the 0 trap with && items.length && <List /> prints a stray 0 when the list is empty. Name the trap and the fix, which is a real boolean like items.length > 0.
Writes an if statement inside JSX JSX braces take expressions, not statements, so it won't compile. Move the if above the return, or use a ternary inline.
Nests ternaries several levels deep It works, but it is hard to read and easy to break. Once there are more than two branches, use early returns or a lookup object.

Interview lens

Likely follow-ups, what you can say, and the weak answers to avoid.

Want a quick review of the fundamentals? See the React cheatsheet.

← Back to all React questions

Pro · $10/mo

88 of 103 React answers are in Pro.

Full answers, code samples, and AI explanations that go simpler or deeper. Cancel anytime.

Full answers + code
AI explanations, simpler or deeper
1,000 AI credits / month
Cancel anytime

Get Pro → See plans & pricing →