React Conditional Rendering

React allows you to conditionally render elements in your component based on some condition. This is useful when you want to display different content or behavior based on certain states or props.

Here are some examples of how to use conditional rendering in React:

Rendering based on a boolean prop:

				
					import React from 'react';

function MyComponent(props) {
  return (
    <div>
      {props.showContent && <p>Some content to show</p>}
    </div>
  );
}

export default MyComponent;

In this example, we’re defining a functional component called MyComponent that conditionally renders a <p> element based on the value of the showContent prop. If the showContent prop is true, the content is rendered; otherwise, it is not.

Rendering based on state:

				
					import React, { useState } from 'react';

function MyComponent() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  function handleLogin() {
    setIsLoggedIn(true);
  }

  return (
    <div>
      {isLoggedIn ? (
        <p>Welcome back!</p>
      ) : (
        <button onClick={handleLogin}>Log in</button>
      )}
    </div>
  );
}

export default MyComponent;

In this example, we’re defining a functional component called MyComponent that conditionally renders a <p> element or a <button> element based on the value of the isLoggedIn state. If isLoggedIn is true, the <p> element is rendered to welcome the user back; otherwise, a <button> element is rendered to allow the user to log in.

Rendering based on complex conditions:

				
					import React from 'react';

function MyComponent(props) {
  return (
    <div>
      {props.items.length > 0 ? (
        <ul>
          {props.items.map(item => (
            <li key={item.id}>{item.name}</li>
          ))}
        </ul>
      ) : (
        <p>No items to display</p>
      )}
    </div>
  );
}

export default MyComponent;

In this example, we’re defining a functional component called MyComponent that conditionally renders a list of items or a message if there are no items to display. The condition is based on the length of the items prop array. If the length is greater than zero, a <ul> element is rendered with each item as an <li> element; otherwise, a <p> element is rendered to display a message that there are no items to display.

Overall, conditional rendering is a powerful feature of React that allows you to create dynamic and responsive user interfaces. By conditionally rendering elements based on certain states or props, you can create complex user interfaces that are easy to maintain and update.

Join To Get Our Newsletter

React Conditional Rendering

You can be your own Guiding star with our help

Sign up and receive the latest tips via email.