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

---
## Problem Explanation
Inside of the render method of the component, write if/else statements that each have its 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`.


---
## Solutions

<details><summary>Solution 1 (Click to Show/Hide)</summary>

```jsx
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. 
```jsx
else {
  return (
    <div>
      <button onClick={this.toggleDisplay}>Toggle Display</button>
    </div>
  )
}
```
</details>