React Conditional Rendering

Conditional rendering in React allows you to render different content or components based on certain conditions or state values. It helps you dynamically control what gets displayed in your UI based on specific conditions. 

Three different ways to implement conditional rendering: 

1. Conditional Rendering using If and Else statement 
2. Conditional Rendering using Ternary Operator 
3. Conditional Rendering using && Operator (Short Circuit Operator)

1. Conditional Rendering using If and Else statement

In functional components, you can achieve conditional rendering using if and else statements inside the body of the component. However, since functional components don't have a render() method like class components, you need to use regular JavaScript control flow instead.

Here's an example:

import React, { useState } from 'react';

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

  if (isLoggedIn) {
    return <p>Welcome, user!</p>;
  } else {
    return <p>Please log in to continue.</p>;
  }
};

export default MyComponent;

In this example, the MyComponent functional component uses the useState hook to declare a state variable named isLoggedIn and its corresponding setter function setIsLoggedIn, initialized to false.

Inside the component's body, an if statement is used to conditionally render different JSX based on the value of isLoggedIn. If isLoggedIn is true, the component returns the JSX element <p> Welcome, user!</p>. If isLoggedIn is false, the component returns the JSX element <p>Please log in to continue.</p>.

2. Conditional Rendering using Ternary Operator

You can use a ternary operator (condition ? expression1 : expression2) to perform inline conditional rendering. Here's an example:

import React from 'react';

function MyComponent() {
  const isLoggedIn = true;

  return isLoggedIn ? <p>Welcome, user!</p> : <p>Please log in to continue.</p>;
}

export default MyComponent;

This approach allows you to render different JSX expressions based on the condition. If the condition is true, it evaluates expression1; otherwise, it evaluates expression2.

3. Conditional Rendering using && Operator (Short Circuit Operator)

You can use the logical && operator to conditionally render a JSX element. Here's an example:

import React from 'react';

function MyComponent() {
  const isLoggedIn = true;

  return isLoggedIn && <p>Welcome, user!</p>;
}

export default MyComponent;

In this example, if isLoggedIn is true, the second part of the expression (<p>Welcome, user!</p>) is evaluated and rendered. If isLoggedIn is false, the entire expression short-circuits, and nothing is rendered.

Related Tutorials

• React Hooks - useState and useEffect
• React JS ( React Hooks) + Spring Boot Tutorial
• Create a New React App Step by Step
• Understanding React App Folder Structure
• How to Add Bootstrap to React App
• ReactJS Axios GET, POST, PUT, and DELETE Example Tutorial
• ReactJS Axios Example
• ReactJS Fetch API Example
• React JS CRUD Example Tutorial
• React Router Step-By-Step Tutorial
• React Class Components
• React Functional Components
• React Props
• React State and setState in Class Components
• React useState Hook
• React Conditional Rendering
• How to Add Bootstrap in React JS Using NPM
• How to Create React App using Vite
• Handling Events in React
• How to Consume REST API in React
• React JS Form Validation Example