React Use a Ternary Expression

[mbonuvictor27]

Why won’t this pass, when i use this.state.input in the ternary expression instead of this.state.userAge?
Your code so far

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

class CheckUserAge extends React.Component {
  constructor(props){
    super(props)
    this.state = {
      input: "",
      userAge: ""

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

  **Your browser information:**

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:103.0) Gecko/20100101 Firefox/103.0

Challenge: Use a Ternary Expression for Conditional Rendering

Link to the challenge:

freeCodeCamp.org

[saurabhv749]

@mbonuvictor27

this.state.input===""?buttonOne

the handlechange function get fired on each keystroke in input field and the condition which you are testing no longer results in true

and the button immediately shows You Shall Not Pass
because your state for userAge is still empty string

it will never gonna show you may enter i.e. (0-9) are < 18

hint…

show the submit button until it’s clicked to change state of userAge

Solution…

(!this.state.userAge) ? buttonOne