React Conditional Rendering

🎓 Top 15 Udemy Courses (80-90% Discount): My Udemy Courses - Ramesh Fadatare — All my Udemy courses are real-time and project oriented courses.

▶️ Subscribe to My YouTube Channel (178K+ subscribers): Java Guides on YouTube

▶️ For AI, ChatGPT, Web, Tech, and Generative AI, subscribe to another channel: Ramesh Fadatare on YouTube

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

My Top and Bestseller Udemy Courses. The sale is going on with a 70 - 80% discount. The discount coupon has been added to each course below:

Build REST APIs with Spring Boot 4, Spring Security 7, and JWT

🆕 High-Demand 80–90% OFF

[NEW] Learn Apache Maven with IntelliJ IDEA and Java 25

🆕 High-Demand 80–90% OFF

ChatGPT + Generative AI + Prompt Engineering for Beginners

🚀 Trending Now 80–90% OFF

Spring 7 and Spring Boot 4 for Beginners (Includes 8 Projects)

🔥 Bestseller 80–90% OFF
Available in Udemy for Business

Building Real-Time REST APIs with Spring Boot - Blog App

🔥 Bestseller 80–90% OFF
Available in Udemy for Business

Building Microservices with Spring Boot and Spring Cloud

🌟 Top Rated 80–90% OFF
Available in Udemy for Business

Java Full-Stack Developer Course with Spring Boot and React JS

🔥 Bestseller 80–90% OFF
Available in Udemy for Business

Build 5 Spring Boot Projects with Java: Line-by-Line Coding

🌟 Top Rated 80–90% OFF

Testing Spring Boot Application with JUnit and Mockito

🔥 Bestseller 80–90% OFF
Available in Udemy for Business

Spring Boot Thymeleaf Real-Time Web Application - Blog App

🔥 Bestseller 80–90% OFF
Available in Udemy for Business

Master Spring Data JPA with Hibernate

🔥 Bestseller 80–90% OFF
Available in Udemy for Business

Spring Boot + Apache Kafka Course - The Practical Guide

🎓 Student Favorite 80–90% OFF
Available in Udemy for Business

Java Testing: Mastering JUnit 5 Framework

🆕 New 80–90% OFF

Reactive Programming in Java: Spring WebFlux and Testing

🌟 Top Rated 80–90% OFF

Spring Boot + RabbitMQ Course - The Practical Guide

🌟 Top Rated 80–90% OFF
Available in Udemy for Business

Functional Programming in Java (Includes Java Collections)

🎓 Student Favorite 80–90% OFF

ChatGPT for Java Developers: Boost Your Productivity with AI

🚀 Trending Now 80–90% OFF