Conditional rendering

  • React
  • Examples
  • Conditional rendering

React example • 4 min read

  • JSX

Here you can find 4 different strategies to conditionally render elements and components in React.

An if condition using the && operator

In this case we use the && operator to render the element <p>Loading...</p> only when the value of isLoading is truthy.

import React, { useState } from 'react';

function MyComponent() {
  const [isLoading, setIsLoading] = useState(false);

  const handleClick = () => {
    setIsLoading(true);
  };

  return (
    <div>
      <button onClick={handleClick}>Start loading</button>
      {isLoading && <p>Loading...</p>}
    </div>
  );
}

export default MyComponent;

Early return

We can also use an if block and return in case the if condition applies. In this case, after we click the button we will only see the element <p>Loading...</p> as the button click will set isLoading to true and therefore make the content inside the if block run.

import React, { useState } from 'react';

function MyComponent() {
  const [isLoading, setIsLoading] = useState(false);

  const handleClick = () => {
    setIsLoading(true);
  };

  if (isLoading) {
    return <p>Loading...</p>;
  }

  return <button onClick={handleClick}>Start loading</button>;
}

export default MyComponent;

In the case where we don't want our component to render anything, we can simply return null.

import React, { useState } from 'react';

function MyComponent() {
  const [isLoading, setIsLoading] = useState(false);

  if (isLoading) {
    return null;
  }

  return <button onClick={handleClick}>Start loading</button>;
}

export default MyComponent;

Ternary operator

Another technique that is quite useful is using the ternary operator. In this case, if isLoading contains a truthy value, we will render the element <p>Loading...</p> and if not, we will render the button.

import React, { useState } from 'react';

function MyComponent() {
  const [isLoading, setIsLoading] = useState(false);

  const handleClick = () => {
    setIsLoading(true);
  };

  return isLoading ? <p>Loading...</p> : <button onClick={handleClick}>Start loading</button>;
}

export default MyComponent;

We also can use the ternary operator to render strings conditionally inside JSX code blocks as on the sample below.

import React, { useState } from 'react';

function MyComponent() {
  const [isLoading, setIsLoading] = useState(false);

  const handleClick = () => {
    setIsLoading(true);
  };

  return (
    <div>
      <button onClick={handleClick}>Start loading</button>
      <p>The component is {isLoading ? 'currently' : 'not'} loading.</p>
    </div>
  );
}

export default MyComponent;

Use variables to save elements

Another way to conditionally render elements and components is to assign them to a variable and conditionally mutate that variable with new content. Although less used, it is also a valid way to selectively render elements in React.

import React from 'react';

function MyComponent(props) {
  let content = <p>Loading...</p>;

  if (!props.isLoading) {
    content = <h1>Welcome back!</h1>;
  }

  return content;
}

export default MyComponent;