freeCodeCamp/guide/english/certifications/front-end-libraries/react/use-a-ternary-expression-for-conditional-rendering/index.md

---
title: Use a Ternary Expression for Conditional Rendering
---
# Use a Ternary Expression for Conditional Rendering
This challenge is to use Ternary Expression only instead of using `If/Else` in code,


---
## Hints

### Hint 1
Ternary operator has three parts, but you can combine several ternary expressions together. Here's the basic syntax:
```
condition ? expressionIfTrue : expressionIfFalse
```

---
## Solutions

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

First you need declare state in constructor like this

```jsx
constructor(props) {
    super(props);
    // change code below this line
      this.state = {
        input: '',
        userAge: ''
      }
    // change code above this line
    this.submit = this.submit.bind(this);
    this.handleChange = this.handleChange.bind(this);
  }
```
Then the ternary operator 
```jsx
{
    /* change code here */
    (this.state.userAge >= 18) ? buttonTwo : (this.state.userAge== '')? buttonOne: buttonThree

}
```

</details>