React Conditional Rendering for Beginners (If/Ternary)

"React conditional rendering" simply means showing different things on the screen depending on whether something is true or false. For example: show a "Welcome back" message if a user is logged in, or show a "Please log in" message if they are not. In plain words: it is just an if/else statement, but for the pieces of your app that appear on the page. This guide shows you every common way to do it, with small examples you can copy and run.

What is conditional rendering in React?

In a normal web page, the HTML you write is always shown. In React, you write JavaScript that decides what to show. Conditional rendering is the technique of using a condition (something that is true or false) to pick which piece of the page appears. You already do this every day without thinking about it: "if it is raining, take an umbrella; if not, don't." React components do the same thing with buttons, messages, and lists.

If you have not used React's useState hook yet, read our guide on the React useState Hook for Beginners first, since most of the examples below use it to track whether something is true or false.

A quick reminder: plain JavaScript if/else

Before React, let's look at a plain JavaScript if/else statement. Conditional rendering in React builds directly on this idea.

let isLoggedIn = true;

if (isLoggedIn) {
  console.log("Welcome back!");
} else {
  console.log("Please log in.");
}

Line by line: line 1 creates a variable called isLoggedIn and sets it to true. Line 3 checks that variable — if it is true, line 4 runs. Line 5 is the "else" case — it only runs when isLoggedIn is false. React conditional rendering uses this exact same logic, just to decide which JSX (the HTML-like code inside a component) to display.

Method 1: if/else before the return statement

The simplest way to conditionally render in React is to write a normal if/else statement above your component's return, and return different JSX from each branch.

function Greeting({ isLoggedIn }) {
  if (isLoggedIn) {
    return <h2>Welcome back!</h2>;
  } else {
    return <h2>Please log in.</h2>;
  }
}

Line 1 defines a component called Greeting that receives a prop named isLoggedIn (a prop is just a value passed into a component, like a function argument). Line 2 checks if isLoggedIn is true. If it is, line 3 returns a heading that says "Welcome back!". If it is false, line 5 returns a different heading instead. Only one of the two return statements ever runs.

Method 2: the ternary operator (condition ? a : b)

Writing a full if/else works, but it takes several lines. When you want to choose between two small pieces of JSX inside the same return statement, the ternary operator is shorter. It reads as: "condition ? do this if true : do this if false".

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

The curly braces { } tell React "this is JavaScript, not plain text". Inside them, isLoggedIn ? <h2>Welcome back!</h2> : <h2>Please log in.</h2> means: if isLoggedIn is true, show the first heading; otherwise show the second one. This is the most common way to write conditional rendering in React because it fits neatly inside JSX.

Method 3: the && operator for "show or show nothing"

Sometimes you don't need two options — you just want to show something only when a condition is true, and show nothing at all otherwise. For that, use the && (AND) operator.

function Inbox({ unreadCount }) {
  return (
    <div>
      <h2>Inbox</h2>
      {unreadCount > 0 && <p>You have {unreadCount} new messages.</p>}
    </div>
  );
}

unreadCount > 0 && <p>...</p> means: if unreadCount > 0 is true, React renders the paragraph. If it is false, React renders nothing at all for that line. This works because && only moves on to the second part if the first part is true.

Method 4: a lookup object for many conditions

If you have more than two or three options (like a status that can be "loading", "success", or "error"), stacking ternaries becomes hard to read. A cleaner approach is a plain JavaScript object that maps each status to its message.

function StatusMessage({ status }) {
  const messages = {
    loading: "Loading, please wait...",
    success: "Your order was placed!",
    error: "Something went wrong.",
  };

  return <p>{messages[status]}</p>;
}

Lines 2 to 6 create an object called messages where each key (loading, success, error) points to the text to show. Line 8 looks up the right message using messages[status] — if status is "success", this returns "Your order was placed!". This avoids a long chain of if/else or ternary statements and is easy to add new statuses to later.

Putting it together: a login button example

Here is a full, working component that combines the ternary operator with the useState hook to toggle between two views when a button is clicked.

import { useState } from "react";

function LoginStatus() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  return (
    <div>
      {isLoggedIn ? <p>Welcome back!</p> : <p>Please log in.</p>}
      <button onClick={() => setIsLoggedIn(!isLoggedIn)}>
        {isLoggedIn ? "Log out" : "Log in"}
      </button>
    </div>
  );
}

Line 4 creates a piece of state called isLoggedIn, starting as false, plus a function setIsLoggedIn to change it. Line 8 uses a ternary to show one paragraph or the other, exactly like before. Line 9 adds a button; when clicked, it calls setIsLoggedIn(!isLoggedIn), which flips true to false or false to true. Line 10 uses another ternary so the button's label always matches the current state. Every time state changes, React automatically re-renders the component with the new condition.

Which method should you use?

Common mistakes beginners make

• Using a number like unreadCount as the condition for && without comparing it to 0 first — this can print a stray "0" on the page.
• Writing deeply nested ternaries (a ? b : c ? d : e) — this becomes hard to read; use if/else or a lookup object instead once you have more than two options.
• Forgetting curly braces { } around JavaScript conditions inside JSX — without them, React treats the condition as plain text.
• Returning nothing when you meant to return null — a component's if branch must return valid JSX or null, not leave the branch empty.

Conditional rendering is one of the most useful skills in React because almost every real app needs to show or hide something: a loading spinner, an error message, a logged-in view, an empty list message. Start with the ternary operator for simple cases, reach for if/else when the JSX gets larger, and use a lookup object once you have several possible options. Practice by rebuilding the login button example above and changing the messages.