React – Conditional Rendering

Conditional rendering in React allows you to render different UI elements or components based on certain conditions.

Here are the main ways to achieve conditional rendering in React:

Using JavaScript Conditional Operators

if/else statements: Use if/else statements to decide what to render.

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {
    return <h1>Welcome back!</h1>;
  } else {
    return <h1>Please sign up.</h1>;
  }
}

Ternary Operator: Use the ternary operator for inline conditional rendering.

function Greeting(props) {
  return props.isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please sign up.</h1>;
}

Logical && Operator

Use the logical && operator to conditionally render a part of the component.

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

Render Nothing

Return null in function to hide original element.

function App() {
  const showWarning = true;
  return (
    <div>
      {showWarning ? <WarningMessage /> : null}
    </div>
  );
}

Switch Statements

For multiple conditions, a switch statement can be clearer.

function App(props) {
  switch (props.status) {
    case 'loading':
      return <Loading />;
    case 'loaded':
      return <Loaded />;
    case 'error':
      return <Error />;
    default:
      return null;
  }
}

Exercise: create a double status button and click to render different object

App.js:

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;
  if (isLoggedIn) {
    return <UserGreeting />;
  }
  return <GuestGreeting />;
}

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

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

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

  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 App;

.