Using submit or userAge , Use a Ternary Expression for Conditional Rendering

[crystalio303]

If the problem is from using this.state.input to say that a number has been typed, why can it not be defined that way?
The alternative seems to use a different state, userAge.

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(state => ({
    userAge: 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 below this line */}
      {this.state.input ? buttonOne : this.state.userAge < 18 ? buttonTwo : buttonThree}
      {this.statse.userAge < 18 ? buttonTwo : this.state.submit ? buttonOne : buttonThree}
      {/* Change code above this line */}
    </div>
  );
}
}
Another attempt to use this.state.input. 

{this.userAge < 18 ? buttonTwo : this.state.input ? buttonThree : buttonOne}

User Agent is: <code>Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.90 Safari/537.36 Edg/89.0.774.57</code>.

**Challenge:** Use a Ternary Expression for Conditional Rendering

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

[crystalio303]

this.state.input becomes this.state.userAge in setState. Maybe the number has to go by that name.

[jenovs]

You should conditionally render one of the three buttons depending on the this.state.userAge.

[crystalio303]

This uses this.state.userAge.

{this.state.userAge == "" ? buttonOne : 
this.state.userAge < 18 ? buttonTwo : buttonThree}

[crystalio303]

This uses the button for under 18 for that condition.

{this.state.userAge == "" ? buttonOne : 
this.state.userAge < 18 ? buttonThree : buttonTwo}