React Conditional Rendering

Conditional rendering in React allows you to decide which components or elements to display based on certain conditions. This feature makes React applications dynamic and responsive to different states or inputs.

Here are some popular methods for implementing conditional rendering in React:

Using the if Statement #

You can use the standard JavaScript if statement to render components conditionally.

Example:

function MissedGoal() {
  return <h1>MISSED!</h1>;
}

function MadeGoal() {
  return <h1>GOAL!</h1>;
}

function Goal(props) {
  const isGoal = props.isGoal;
  if (isGoal) {
    return <MadeGoal />;
  }
  return <MissedGoal />;
}

// Rendering the component
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Goal isGoal={false} />);

Output:

• If isGoal is true, the MadeGoal component will render.
• If isGoal is false, the MissedGoal component will render.

Try It: Change the isGoal attribute to true to see the other component.

root.render(<Goal isGoal={true} />);

Using the Logical && Operator #

React supports embedding JavaScript expressions in JSX using curly braces {}. The logical && operator can be used for conditional rendering.

Example:

function Garage(props) {
  const cars = props.cars;
  return (
    <>
      <h1>Garage</h1>
      {cars.length > 0 && (
        <h2>You have {cars.length} car(s) in your garage.</h2>
      )}
    </>
  );
}

const cars = ['Ford', 'BMW', 'Audi'];
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Garage cars={cars} />);

Output:

• If cars.length > 0, the message with the number of cars will render.
• Otherwise, nothing will render.

Try It: Empty the cars array to observe the change.

const cars = [];
root.render(<Garage cars={cars} />);

Using the Ternary Operator #

The ternary operator is a concise way to implement conditional rendering.

Syntax:

condition ? expressionIfTrue : expressionIfFalse

Example:

function MissedGoal() {
  return <h1>MISSED!</h1>;
}

function MadeGoal() {
  return <h1>GOAL!</h1>;
}

function Goal(props) {
  const isGoal = props.isGoal;
  return <>{isGoal ? <MadeGoal /> : <MissedGoal />}</>;
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Goal isGoal={false} />);

Output:

• If isGoal is true, the MadeGoal component will render.
• If isGoal is false, the MissedGoal component will render.

Summary #

• If Statement: Suitable for more complex conditions where multiple statements are needed.
• Logical &&: Best for rendering an element only when a condition is true.
• Ternary Operator: Ideal for simpler conditions that result in two possible outputs.

Mastering conditional rendering helps you build dynamic and efficient React applications, catering to different states and user interactions effortlessly.

Want to learn React with an instructor, either offline or online? Find experienced tutors near you and join Coaching Wallah—completely free for students!