freeCodeCamp/guide/english/certifications/front-end-libraries/react/render-with-an-ifelse-condition/index.md

title
Render with an If/Else Condition

Render with an If/Else Condition

Method

Inside of the render method of the component, write if/else statements that each have it's own return method that has different JSX. This gives programmers the ability to render different UI according to various conditions.

First, wrap the current return method inside of an if statement and set the condition to check if the variable 'display' is true. Remember, you access state using this.state.

Solution

if (this.state.display === true) {
  return (
    <div>
      <button onClick={this.toggleDisplay}>Toggle Display</button>
      <h1>Displayed!</h1>
    </div>
  );
}

Next, create an else statement that returns the same JSX without the h1 element.

else {
  return (
    <div>
      <button onClick={this.toggleDisplay}>Toggle Display</button>
    </div>
  )
}