how to use Conditional Rendering in ReactJS

In this article, we can try to define ReactJS: how to use Conditional Rendering, react Conditional Rendering, and how can we use Conditional Rendering in react.

Conditional Rendering

In ReactJS, we can create distinct components that summery the behavior we need. After hen, we can render only some of them, depending on the state of our application.

So, Conditional rendering in ReactJS works the same way conditions work in JavaScript. Also, it uses JavaScript operators like if or the conditional operator to create elements representing the current state, and let ReactJS update the UI to match them.

Consider these two components below the code:

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

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

After then we will create or make a Greeting component that displays either of these components depending on whether a user is logged in like below:

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

const root = ReactDOM.createRoot(document.getElementById('root'));
// Try changing to isLoggedIn={true}:
root.render(<Greeting isLoggedIn={false} />);

Element Variables

Now, we can use variables in-store elements. So, it can help us conditionally render a part of the component while the rest of the output doesn’t change.

You can purchase your hosting from Cloudsurph.com, Cloudsurph hosting is a reliable hosting option for business and personal projects. We offer insight and help on system configuration issues and code errors or bugs.

Let’s consider these two new components representing the Logout and Login buttons:

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

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

So, like the below example, we will create a stateful component that we called LoginControl.

Here, it will render either <LoginButton /> or <LogoutButton /> depending on its current state and it will also render a <Greeting /> from the previous example like below:

class LoginControl extends React.Component {
  constructor(props) {
    super(props);
    this.handleLoginClick = this.handleLoginClick.bind(this);
    this.handleLogoutClick = this.handleLogoutClick.bind(this);
    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>
    );
  }
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<LoginControl />);

Inline If with Logical && Operator

Now, here you may embed expressions in JSX by wrapping them in curly braces.

You can check our article: AdonisJS: REST API simple CRUD Operation. IF you want then buy a good, reliable, secure web hosting service from here: click here

Also, this includes the JavaScript logical && operator. So, it can be handy for conditionally including an element like the below:

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

const messages = ['React', 'Re: React', 'Re:Re: React'];

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Mailbox unreadMessages={messages} />);

Therefore, if the condition is true and the element right after && will appear in the output and if it is false, then ReactJS will ignore and skip it.

render() {
const count = 0;
return (
<div>
{count && <h1>Messages: {count}</h1>}
</div>
);
}

Inline If-Else with Conditional Operator

Now, we can try another method for conditionally rendering elements inline is to use the JavaScript conditional operator condition? true : false.

See the example below, we are using it to conditionally render a small block of text.

render() {
const isLoggedIn = this.state.isLoggedIn;
return (
<div>
The user is <b>{isLoggedIn ? 'currently' : 'not'}</b> logged in.
</div>
);
}

Also, it can also be used for larger expressions although it is less obvious what’s going on with the below code:

render() {
const isLoggedIn = this.state.isLoggedIn;
return (
<div>
{isLoggedIn
? <LogoutButton onClick={this.handleLogoutClick} />
: <LoginButton onClick={this.handleLoginClick} />
}
</div>
);
}

Preventing Component from Rendering

Let’s see the example code below, the <WarningBanner /> is rendered depending on the value of the prop called warn and if the value of the prop is false, then the component does not render like below:

function WarningBanner(props) {
  if (!props.warn) {
    return null;
  }

  return (
    <div className="warning">
      Warning!
    </div>
  );
}

class Page extends React.Component {
  constructor(props) {
    super(props);
    this.state = {showWarning: true};
    this.handleToggleClick = this.handleToggleClick.bind(this);
  }

  handleToggleClick() {
    this.setState(state => ({
      showWarning: !state.showWarning
    }));
  }

  render() {
    return (
      <div>
        <WarningBanner warn={this.state.showWarning} />
        <button onClick={this.handleToggleClick}>
          {this.state.showWarning ? 'Hide' : 'Show'}
        </button>
      </div>
    );
  }
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Page />);

Finally, returning null from a component’s render method does not affect the firing of the component’s lifecycle methods even componentDidUpdate will still be called.

If you enjoyed reading this article and have more questions please reach out to our support team via live chat or email and we would be glad to help you. we provide server hosting for all types of need and we can even get your server up and running with the service of your choice.

ReactJS: how to use Conditional Rendering