I don’t understand why this ternary operator works. It seems like the first operator should reduce the overall statement to either:
buttonTwo ? buttonOne : buttonThree
OR
true ? buttonOne : buttonThree
In either case it seems like buttonOne and buttonThree should be the only options for what is actually rendered to the screen, so why is it that when the condition userAge >= 18 is true, buttonTwo is rendered seemingly without evaluation the second ternary expression?
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 >= 18) ? buttonTwo : (this.state.userAge=='') ? buttonOne : buttonThree
}
</div>
);
}
};