The Project | About Us | Contribute | Donations | License

HOME

Conditional rendering in React allows you to render different components or elements based on certain conditions. This is a fundamental concept in React that helps in creating dynamic and interactive user interfaces.

Key Concepts

Conditional Statements: Use JavaScript conditional statements (if-else, ternary operators) to determine what to render.
Logical && Operator: Use the logical AND (&&) operator to render a component only if a condition is true.
Conditional Rendering with Functions: Create functions that return different components based on conditions.

Using If-Else Statements

The most straightforward way to implement conditional rendering is by using if-else statements.

Example

import React from 'react';

class Greeting extends React.Component {
  render() {
    const isLoggedIn = this.props.isLoggedIn;
    if (isLoggedIn) {
      return <h1>Welcome back!</h1>;
    } else {
      return <h1>Please sign up.</h1>;
    }
  }
}

export default Greeting;

Explanation

The Greeting component takes a prop isLoggedIn.
If isLoggedIn is true, it renders "Welcome back!".
If isLoggedIn is false, it renders "Please sign up."

Using Ternary Operators

Ternary operators provide a more concise way to write conditional rendering.

Example

import React from 'react';

function UserGreeting(props) {
  return <h1>Welcome back!</h1>;
}

function GuestGreeting(props) {
  return <h1>Please sign up.</h1>;
}

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  return (
    isLoggedIn ? <UserGreeting /> : <GuestGreeting />
  );
}

export default Greeting;

Explanation

The Greeting component uses a ternary operator to decide which component to render.
If isLoggedIn is true, it renders UserGreeting.
If isLoggedIn is false, it renders GuestGreeting.

Using Logical && Operator

The logical AND (&&) operator can be used to render a component only if a condition is true.

Example

import React from 'react';

function Mailbox(props) {
  const unreadMessages = props.unreadMessages;
  return (
    <div>
      <h1>Hello!</h1>
      {unreadMessages.length > 0 &&
        <h2>
          You have {unreadMessages.length} unread messages.
        </h2>
      }
    </div>
  );
}

export default Mailbox;

Explanation

The Mailbox component takes a prop unreadMessages.
If unreadMessages.length is greater than 0, it renders the message count.
If unreadMessages.length is 0, it renders nothing.

Conditional Rendering with Functions

You can also use functions to encapsulate conditional rendering logic.

Example

import React from 'react';

function UserGreeting() {
  return <h1>Welcome back!</h1>;
}

function GuestGreeting() {
  return <h1>Please sign up.</h1>;
}

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  return (
    <div>
      {getGreeting(isLoggedIn)}
    </div>
  );
}

function getGreeting(isLoggedIn) {
  if (isLoggedIn) {
    return <UserGreeting />;
  }
  return <GuestGreeting />;
}

export default Greeting;

Explanation

The getGreeting function encapsulates the conditional logic.
The Greeting component calls getGreeting to determine which component to render.

Practical Exercise

Task

Create a LoginControl component that displays either a LoginButton or a LogoutButton based on the user's login state.

Solution

import React from 'react';

function LoginButton(props) {
  return (
    <button onClick={props.onClick}>
      Login
    </button>
  );
}

function LogoutButton(props) {
  return (
    <button onClick={props.onClick}>
      Logout
    </button>
  );
}

class LoginControl extends React.Component {
  constructor(props) {
    super(props);
    this.state = {isLoggedIn: false};

    this.handleLoginClick = this.handleLoginClick.bind(this);
    this.handleLogoutClick = this.handleLogoutClick.bind(this);
  }

  handleLoginClick() {
    this.setState({isLoggedIn: true});
  }

  handleLogoutClick() {
    this.setState({isLoggedIn: false});
  }

  render() {
    const isLoggedIn = this.state.isLoggedIn;
    let button;

    if (isLoggedIn) {
      button = <LogoutButton onClick={this.handleLogoutClick} />;
    } else {
      button = <LoginButton onClick={this.handleLoginClick} />;
    }

    return (
      <div>
        <Greeting isLoggedIn={isLoggedIn} />
        {button}
      </div>
    );
  }
}

export default LoginControl;

Explanation

LoginControl manages the login state.
It renders either LoginButton or LogoutButton based on the state.
Clicking the buttons toggles the login state.

Common Mistakes

Not Binding Event Handlers: Ensure that event handlers are properly bound to the component instance.
Incorrect Use of Logical Operators: Be cautious with the logical && operator to avoid rendering unintended values.

Conclusion

Conditional rendering is a powerful feature in React that allows you to create dynamic and interactive user interfaces. By using if-else statements, ternary operators, logical && operators, and functions, you can control what gets rendered based on various conditions. Practice these techniques to become proficient in building complex React applications.

Conditional Rendering

Key Concepts

Using If-Else Statements

Example

Explanation

Using Ternary Operators

Example

Explanation

Using Logical && Operator

Example

Explanation

Conditional Rendering with Functions

Example

Explanation

Practical Exercise

Task

Solution

Explanation

Common Mistakes

Conclusion

React Course

Module 1: Introduction to React

Module 2: React Components

Module 3: Working with Events

Module 4: Advanced Component Concepts

Module 5: React Hooks

Module 6: Routing in React

Module 7: State Management

Module 8: Performance Optimization

Module 9: Testing in React

Module 10: Advanced Topics

Module 11: Project: Building a Complete Application