Use a Ternary Expression for Conditional Rendering!

JavaScript
1

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

2

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

4

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 */
        }