Conditional Rendering

One of the key features of React is its ability to conditionally render content based on certain conditions. This feature is known as conditional rendering.

In this blog, we'll take a look at what conditional rendering is, its importance and how to use it in React.

What is conditional rendering?

Conditional rendering refers to the ability to display certain elements or different content to users based on certain conditions. These conditions can be based on the state of the application, user input, or any other variable that can be evaluated. In React, conditional rendering works the same way as the conditions work in JavaScript.

Conditional rendering is useful when you want to display different content to the user based on certain conditions. For example, you may want to display a login form to users who are not logged in, and a user dashboard to users who are logged in.

Techniques for Conditional Rendering in React:

In React, conditional rendering can be achieved using a variety of techniques.

Let's create a MyApp component that will display either of two messages depending on whether a user is logged in or not. Here are some of the most common approaches:

🧨Using if-else statements

The simplest way to conditionally render content in React is by using if statements. Here's an example:

function MyApp(props) {
  if (props.isLoggedIn) {
    return <p>Welcome back!</p>;
  } else {
    return <p>Please log in.</p>;
  }
}

In this example, the MyApp function takes a props object as an argument. If the isLoggedIn property of the props object is set to true, the component will return a "Welcome back!" message. Otherwise, it will return a "Please sign in!" message.

🧨Using ternary operator

Another common approach to conditional rendering in React is to use the ternary operator. It makes your if-else statement more concise and is used as a shortcut for the if statement.

Here's an example:

function MyApp(props) {
  return (
    <div>
      {props.isLoggedIn ? (
        <p>Welcome back!</p>
      ) : (
        <p>Please log in.</p>
      )}
    </div>
  );
}

In this example, the component returns a div element that contains either a "Welcome back!" message or a "Please sign in!" message, depending on the value of the isLoggedIn property of the props object.

🧨Using && operator

You can also use the && operator to conditionally render content in React.

Here's an example:

function MyApp(props) {
  return (
    <div>
      {props.isLoggedIn && <p>Welcome back!</p>}
      {!props.isLoggedIn && <p>Please log in.</p>}
    </div>
  );
}

In this example, if the condition is true, it will return the element right after &&, and if it is false, React will ignore and skip it, depending on the value of the isLoggedIn property of the props object.

🧨Using switch statements

When you want to achieve multiple conditional rendering, switch-case statement is the way to go:

import React from 'react';

function MyApp(props) {
  switch(props.isLoggedIn) {
    case true:
      return <h1>Welcome back!</h1>;
    case false:
      return <h1>Please sign up!</h1>;
    default:
      return null;
  }
}

export default MyApp;

In this example, the MyApp component takes a single prop isLoggedIn. The switch case statement is used to conditionally render different content based on the value of isLoggedIn. If isLoggedIn is true, the component returns "Welcome Back!", if it's false, the component will return "Please sign in!", and if it's neither true nor false, the component will return null.

The Output

In the App.jsx file, after importing the component, you need to simply pass in the isLoggedIn prop to either of the two values:

<MyApp isLoggedIn={true} />

This will result in:

or

<MyApp isLoggedIn={false} />

Which will result in:

Importance of Conditional Rendering

1. Simplified Code

   Conditional rendering helps in simplifying your code and make it more readable. This helps in avoiding duplicating code and creating more modular components.

2. Improved Performance

   By conditionally rendering only the necessary parts of the UI, you can avoid rendering unnecessary components and improve the performance of your application. This results in a smoother and faster user experience.

3. Customizable User Experience

   Conditional rendering allows in creating dynamic user interfaces that adapt to changes in data and user interactions. By displaying or hiding content based on the user's actions or the application state, you can create a more personalized and engaging user experience.

4. Flexibility

   Conditional rendering enables you to design more flexible and customizable components. By rendering different content based on current state of the application, you can create components that can be utilized in diverse contexts and can adjust to various user interactions.

In Summary

In this blog, we've looked at the importance and four common approaches to conditional rendering in React: using if statements, the ternary operator, the && operator and using the switch statement. There are also other ways to achieve conditional rendering in React. With these techniques, you can build dynamic and responsive user interfaces that adapt to the needs of your users.

---

References

• react.dev

• freecodecamp

• w3schools

---

Thank you for taking the time to read this blog. Hope you found it informative and enjoyable!

In the next article of this series, we shall take a look at List Rendering.

Catch you guys on the next one. Cheers .. ✌️