React Conditional Rendering

Introduction

In this chapter, we will explore how to implement conditional rendering in React. Conditional rendering allows you to render different components or elements based on certain conditions. This is essential for creating dynamic and interactive UIs. We will cover various techniques for conditional rendering, including if statements, ternary operators, logical && operators, and switch-case statements.

Table of Contents

1. What is Conditional Rendering?
2. Using if Statements
   • Example: Simple if Statement
3. Using Ternary Operators
   • Example: Ternary Operator
4. Using Logical && Operator
   • Example: Logical && Operator
5. Using Switch-Case Statements
   • Example: Switch-Case Statement
6. Key Features of Conditional Rendering
7. Conclusion

What is Conditional Rendering?

Conditional rendering in React works the same way conditions work in JavaScript. It allows you to render different UI elements or components based on certain conditions. This can be useful for displaying different content to users based on their actions, status, or any other condition.

Using if Statements

One way to handle conditional rendering is by using if statements. This method involves checking a condition and returning different elements based on the result.

Example: Simple if Statement

1. Create a New File for the Component: In the src directory, create a new file named UserStatus.js.

2. Define the Component: Add the following code to UserStatus.js to create a class component that uses an if statement for conditional rendering:

   // UserStatus.js
   import React, { Component } from 'react';
   
   class UserStatus extends Component {
     constructor(props) {
       super(props);
       this.state = {
         isLoggedIn: false
       };
     }
   
     render() {
       const { isLoggedIn } = this.state;
   
       if (isLoggedIn) {
         return <h1>Welcome back!</h1>;
       } else {
         return <h1>Please log in.</h1>;
       }
     }
   }
   
   export default UserStatus;
   

   In this example, the UserStatus component uses an if statement to check the isLoggedIn state and render different messages accordingly.

3. Use the Component in App.js: Open src/App.js and modify the App component to use the UserStatus component:

   // App.js
   import React from 'react';
   import UserStatus from './UserStatus';
   
   function App() {
     return (
       <div>
         <UserStatus />
       </div>
     );
   }
   
   export default App;
   

4. Save and View Changes: Save the files and go to your browser. You should see a message prompting the user to log in.

Using Ternary Operators

Another way to handle conditional rendering is by using ternary operators. This is a more concise way to write conditions directly within the JSX.

Example: Ternary Operator

1. Create a New File for the Component: In the src directory, create a new file named Greeting.js.

2. Define the Component: Add the following code to Greeting.js to create a functional component that uses a ternary operator for conditional rendering:

   // Greeting.js
   import React, { useState } from 'react';
   
   function Greeting() {
     const [isMorning, setIsMorning] = useState(true);
   
     return (
       <div>
         <h1>{isMorning ? 'Good Morning!' : 'Good Evening!'}</h1>
         <button onClick={() => setIsMorning(!isMorning)}>
           Toggle Greeting
         </button>
       </div>
     );
   }
   
   export default Greeting;
   

   In this example, the Greeting component uses a ternary operator to check the isMorning state and render different greetings accordingly. The button toggles the greeting message.

3. Use the Component in App.js: Open src/App.js and modify the App component to use the Greeting component:

   // App.js
   import React from 'react';
   import Greeting from './Greeting';
   
   function App() {
     return (
       <div>
         <Greeting />
       </div>
     );
   }
   
   export default App;
   

4. Save and View Changes: Save the files and go to your browser. You should see a greeting message that toggles between "Good Morning!" and "Good Evening!" when you click the button.

Using Logical && Operator

The logical && operator can be used for conditional rendering when you want to render an element only if a condition is true. If the condition is false, React will ignore the element.

Example: Logical && Operator

1. Create a New File for the Component: In the src directory, create a new file named Notification.js.

2. Define the Component: Add the following code to Notification.js to create a functional component that uses the logical && operator for conditional rendering:

   // Notification.js
   import React, { useState } from 'react';
   
   function Notification() {
     const [showNotification, setShowNotification] = useState(true);
   
     return (
       <div>
         {showNotification && <p>You have new messages!</p>}
         <button onClick={() => setShowNotification(false)}>
           Dismiss
         </button>
       </div>
     );
   }
   
   export default Notification;
   

   In this example, the Notification component uses the logical && operator to check the showNotification state and render the notification message accordingly. The button hides the notification.

3. Use the Component in App.js: Open src/App.js and modify the App component to use the Notification component:

   // App.js
   import React from 'react';
   import Notification from './Notification';
   
   function App() {
     return (
       <div>
         <Notification />
       </div>
     );
   }
   
   export default App;
   

4. Save and View Changes: Save the files and go to your browser. You should see a notification message that can be dismissed by clicking the button.

Using Switch-Case Statements

For more complex conditional rendering, you can use switch-case statements. This is useful when you have multiple conditions to check.

Example: Switch-Case Statement

1. Create a New File for the Component: In the src directory, create a new file named StatusMessage.js.

2. Define the Component: Add the following code to StatusMessage.js to create a functional component that uses a switch-case statement for conditional rendering:

   // StatusMessage.js
   import React, { useState } from 'react';
   
   function StatusMessage() {
     const [status, setStatus] = useState('loading');
   
     const renderMessage = () => {
       switch (status) {
         case 'loading':
           return <p>Loading...</p>;
         case 'success':
           return <p>Data loaded successfully!</p>;
         case 'error':
           return <p>Error loading data.</p>;
         default:
           return null;
       }
     };
   
     return (
       <div>
         {renderMessage()}
         <button onClick={() => setStatus('loading')}>Loading</button>
         <button onClick={() => setStatus('success')}>Success</button>
         <button onClick={() => setStatus('error')}>Error</button>
       </div>
     );
   }
   
   export default StatusMessage;
   

   In this example, the StatusMessage component uses a switch-case statement to check the status state and render different messages accordingly. Buttons allow the user to change the status.

3. Use the Component in App.js: Open src/App.js and modify the App component to use the StatusMessage component:

   // App.js
   import React from 'react';
   import StatusMessage from './StatusMessage';
   
   function App() {
     return (
       <div>
         <StatusMessage />
       </div>
     );
   }
   
   export default App;
   

4. Save and View Changes: Save the files and go to your browser. You should see different status messages that can be changed by clicking the buttons.

Key Features of Conditional Rendering

1. Flexibility: Conditional rendering allows you to render different components or elements based on conditions.
2. Multiple Techniques: You can use if statements, ternary operators, logical && operators, and switch-case statements for conditional rendering.
3. Dynamic UIs: Conditional rendering is essential for creating dynamic and interactive user interfaces.

Conclusion

In this chapter, you learned how to implement conditional rendering in React using various techniques, including if statements, ternary operators, logical && operators, and switch-case statements. Conditional rendering allows you to render different components or elements based on certain conditions, enabling the creation of dynamic and interactive UIs. In the next chapter, we will explore React List Rendering in React.