React Conditional Rendering Examples

React conditional rendering is a way to show different parts of a page. Click here to see how it works and see practical examples for real projects.

What is Conditional Rendering in React?

Conditional rendering in React means the view shows one part or another based on data.

The component reads a condition and then shows a result that matches it.
It works like an if statement in normal JavaScript, but inside JSX.

Here is the syntax:

{condition ? <ComponentA /> : <ComponentB />}

This code shows ComponentA when the condition is true and shows ComponentB when false.

You need conditional rendering to show different layouts for user states or data states. It keeps the code simple and stops many duplicate components on the page.

Here is a quick example:

function UserStatus({ isLoggedIn }) {
  return (
    <div>
      {isLoggedIn ? <p>Welcome back</p> : <p>Please log in</p>}
    </div>
  );
}

This code checks if the user is logged in and then shows a message that matches the state.

The Different Ways to do Conditional Rendering in React

React gives many ways to handle conditions inside components.
You can use ternary operators, logical AND, switch cases, or separate functions.

Logical AND:

{isLoggedIn && <Dashboard />}

This line shows Dashboard only when isLoggedIn is true.

Switch:

switch(status) {
  case 'loading':
    return <Spinner />;
  case 'done':
    return <Content />;
  default:
    return <Fallback />;
}

This code changes the view based on a status value.

Use Functions for Conditional Rendering

You can move conditions into a function to keep JSX clean.

function renderContent(user) {
  if (user.admin) return <AdminPanel />;
  return <UserPanel />;
}

function App({ user }) {
  return <div>{renderContent(user)}</div>;
}

This approach keeps logic outside JSX and makes each part easy to read.

Examples

Show Admin Panel or User Panel:

function App({ user }) {
  return (
    <div>
      {user.isAdmin ? <AdminPanel /> : <UserPanel />}
    </div>
  );
}

This code checks if a user is an admin and then shows the right panel for that state in the app.

Load Spinner before Content:

function ContentLoader({ loading }) {
  return (
    <div>
      {loading ? <Spinner /> : <Content />}
    </div>
  );
}

This example shows a spinner before the content and then shows the content after the data loads from the server.

Multiple Status Handling:

function StatusView({ status }) {
  switch (status) {
    case 'idle':
      return <p>Idle state</p>;
    case 'loading':
      return <p>Loading...</p>;
    case 'done':
      return <p>Done!</p>;
    default:
      return <p>Unknown</p>;
  }
}

This code switches between many states and shows the correct message or view for each one.

Function-based Render with Nested Components:

function renderDashboard(user) {
  if (user.role === 'editor') return <EditorDashboard />;
  if (user.role === 'viewer') return <ViewerDashboard />;
  return <GuestDashboard />;
}

function App({ user }) {
  return <div>{renderDashboard(user)}</div>;
}

This example moves the decision into a function and gives a dashboard that fits each user role.

Wrapping Up

You learned what conditional rendering is in React and how to apply it in many ways. You saw how to use ternary operators, logical AND, switch, and functions.

Here is a quick recap:

• Conditional rendering lets you show different components for different states and keeps your code short.

FAQs

function MyComponent() {
  const show = true;
  if (show) {
    return <div>Visible content</div>;
  }
  return <div>Hidden content</div>;
}

{ show ? <div>Visible</div> : <div>Hidden</div> }

Similar Reads