Tell us what’s happening:
the code returns an error:
// running test
Cannot read property ‘input’ of null
Cannot read property ‘input’ of null
Cannot read property ‘input’ of null
Cannot read property ‘input’ of null
Cannot read property ‘input’ of null
Cannot read property ‘input’ of null
Cannot read property ‘input’ of null
// tests completed
Thank you!
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.setState({
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 (Macintosh; Intel Mac OS X 10_13_4) 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