Implementation method of conditional rendering in React

What is conditional rendering?

Conditional rendering refers to the process of presenting different content based on certain conditions. In React, we can use conditional rendering to render different content according to different states. This allows us to update the UI dynamically based on user interaction.

Implementation of conditional rendering

In React, we can use conditional statements to implement conditional rendering. The most commonly used conditional statements are if statements and ternary operators.

Conditional Rendering with if statement

We can use if statements to present different content according to the state. For example, suppose we have a state variable isLoggedin, which indicates whether the user is logged in. We can use the following code to present different content based on the status:

class App extends  {
  constructor(props) {
    super(props);
     = { isLoggedin: false };
  }

  render() {
    if () {
      return <div>Welcome back!</div>;
    } else {
      return <div>Please log in.</div>;
    }
  }
}

In the above code, we use the if statement to check the value of isLoggedin and present different contents according to different values.

Conditional Rendering with ternary operators

In addition to if statements, we can also use ternary operators for conditional rendering. The ternary operator is a concise syntax that allows us to implement conditional rendering in a single line of code. For example, we can use the following code to achieve the same functionality as above:

class App extends  {
  constructor(props) {
    super(props);
     = { isLoggedin: false };
  }

  render() {
    return (
      <div>
        { ? <div>Welcome back!</div> : <div>Please log in.</div>}
      </div>
    );
  }
}

In the above code, we use the ternary operator to check the value of isLoggedin and present different contents according to different values.

Summarize

In this article, we introduce conditional rendering in React. We learned how to implement conditional rendering using if statements and ternary operators, and provided some sample code. Hopefully this article can help you better understand conditional rendering in React.

This is the end of this article about the implementation method of conditional rendering in React. For more related React conditional rendering content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!