Use a Ternary Expression for Conditional Rendering!

Tell us what’s happening:

I got the answer with some help. But I was wondering what the “:” was right before buttonOne? Thank you.

      this.state.userAge.length > 0 ? (this.state.input < 18 ? buttonThree : buttonTwo) : buttonOne

Your code so far



const inputStyle = {
  width: 235,
  margin: 5
}

class CheckUserAge extends React.Component {
  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);
  }
  handleChange(e) {
    this.setState({
      input: e.target.value,
      userAge: ''
    });
  }
  submit() {
    this.setState({
      userAge: this.state.input
    });
  }
  render() {
    const buttonOne = <button onClick={this.submit}>Submit</button>;
    const buttonTwo = <button>You May Enter</button>;
    const buttonThree = <button>You Shall Not Pass</button>;
    return (
      <div>
        <h3>Enter Your Age to Continue</h3>
        <input
          style={inputStyle}
          type="number"
          value={this.state.input}
          onChange={this.handleChange} /><br />
        {
          
          /* change code here */
          this.state.userAge.length > 0 ? (this.state.input < 18 ? buttonThree : buttonTwo) : buttonOne
        }
      </div>
    );
  }
};

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.99 Safari/537.36.

Link to the challenge:
https://learn.freecodecamp.org/front-end-libraries/react/use-a-ternary-expression-for-conditional-rendering

buttonOne is the term returned when the first ternary condition fails. That is when this.state.userAge.length is <= 0

You might want to refresh your basic JavaScript skills before starting with React.

This also works and attempts to meet the spec in the statement since the initial comparison wants to check the condition before the user enters any age.

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