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

title

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

Solution 1 (Click to Show/Hide)

First you need declare state in constructor like this

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

{
    /* change code here */
    (this.state.userAge >= 18) ? buttonTwo : (this.state.userAge== '')? buttonOne: buttonThree

}