Conditional rendering in React

Why would you conditionally render something?

Usually, most React components are hard-coded and don't rely on other events or data to render; this isn't always the case though — sometimes you'll only want something to render when a certain condition is met.

In vanilla JavaScript, anything conditional can usually be handled with an if/else statement, but not in React; unfortunately, JSX doesn't allow the use of traditional conditional statements.

Conditional ternary operator

So how do we get around this? It's quite simple — in React, you conditionally render components within JSX by using the conditional ternary operator. The ternary operator is a shorthand syntax for writing if/else statements, it's also the only JavaScript operator that takes three operands. Let's convert a traditional if/else statement to a ternary expression:

let greeting = true;

if (greeting) {
  console.log("Hello!");
} else {
  console.log("Goodbye!");
}
        

...converting this to a ternary expression is easy. A ternary expression takes three operands: a condition followed by a question mark (?), then an expression to execute if the condition is truthy followed by a colon (:), and finally an expression to execute if the condition is falsy. It's better explained when visualized...

let greeting = true;

greeting === true ? console.log("Hello!") : console.log("Goodbye!");
        

...as you can see, it's a lot more concise than using a traditional if/else statement.

Conditionally rendering components

Now that you understand how the ternary operator works, you can conditionally render components inside of JSX. Let's say you have a piece of state called showMessage that holds an initial value of false. Anytime the state changes to true, we want a component called Message to render in our application. The piece of state will be controlled with a simple button. Here's how that looks:

// App.js
import Message from "./Message";
import { useState } from "react";

const App = () => {
  const [showMessage, setShowMessage] = useState(false);

  const clickHandler = () => {
    setShowMessage(!showMessage);
  };

  return (
    <div>
      <button type="button" onClick={clickHandler}>
        Toggle Message
      </button>
      {showMessage ? <Message /> : ""}
    </div>
  );
};

export default App;
        

// Message.js
const Message = () => {
  return (
    <>
      <p>Hello world!</p>
    </>
  );
};

export default Message;
        

...whenever the button is clicked, showMessage will become true, so the Message component will conditionally render on the screen and display Hello world!. Clicking the button again will change the state back to false, therefore reevaluating the ternary expression and rendering nothing but an empty string.

The ternary operator isn't the only way to conditionally render components in React — you can also use the logical AND (&&) operator, like so:

// App.js
// ...
{showMessage && <Message />}
// ...
        

...if showMessage is true, it'll render the Message component, otherwise it won't render anything at all. I have a whole article talking about logical operators and short-circuit evaluation, which you can find here.