How to Use && for Conditional Rendering in React

In React, you can use the && operator to conditionally render JSX by placing the condition on the left and the JSX on the right. If the condition is true, React renders the JSX; if false, it renders nothing.

Syntax

The && operator works by evaluating the left side condition first. If the condition is true, it returns the right side JSX to render. If the condition is false, it returns false, which React ignores and renders nothing.

This is a concise way to show something only when a condition is met.

jsx

condition && <JSX />

Example

This example shows a React functional component that uses && to render a message only if isLoggedIn is true.

jsx

import React, { useState } from 'react';

export default function WelcomeMessage() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  return (
    <div>
      <button onClick={() => setIsLoggedIn(!isLoggedIn)}>
        {isLoggedIn ? 'Log out' : 'Log in'}
      </button>
      {isLoggedIn && <p>Welcome back, user!</p>}
    </div>
  );
}

Output

Button labeled 'Log in' initially. When clicked, button changes to 'Log out' and text 'Welcome back, user!' appears below.

Common Pitfalls

One common mistake is when the right side of && returns a value that React can render but is not JSX, like 0. Since 0 is falsy but renderable, it will show unexpectedly.

Also, if the condition is not a boolean but a value like a number or string, it may cause unexpected rendering.

jsx

const count = 0;

// Wrong: renders 0 on screen
return (
  <div>
    {count && <p>You have {count} messages</p>}
  </div>
);

// Right: explicitly check condition
return (
  <div>
    {count > 0 && <p>You have {count} messages</p>}
  </div>
);

Quick Reference

• Use: condition && <JSX /> to render JSX only if condition is true.
• Do not use: values like 0 or empty strings as conditions without explicit checks.
• Remember: React ignores false, null, and undefined in rendering.

Key Takeaways

Use && to render JSX only when a condition is true in React components.

React ignores false, null, and undefined, so nothing renders if the condition is false.

Avoid using values like 0 or empty strings directly as conditions to prevent unexpected output.

Always ensure the condition is a boolean or explicitly checked for clarity.

&& is a concise alternative to ternary operators when you only want to render something conditionally.