Use a Ternary Expression for Conditional Rendering - very confusing error message

Ok so it asks you to

First, initialize the state of CheckUserAge with input and userAge both set to values of an empty string.

I’ve done that but the error message says:
“Cannot read property ‘input’ of null”

I know the second part (ternary) is not complete but I just want to get passed this part.
I was expecting button one to render.

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 />
        {
          this.state.userAge =='' ? buttonOne : buttonThree 
        }
      </div>
    );
  }
};

Your browser information:

User Agent is: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Ubuntu Chromium/67.0.3396.99 Chrome/67.0.3396.99 Safari/537.36.

Link to the challenge:

My mistake. I am initialising state incorrectly.

Ok still need help. What is wrong with this ternary statement?

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 />
        {
          this.state.input =='' && this.state.userAge === '' ? buttonOne : (this.state.userAge < 18 ? buttonThree : buttonTwo) 
        }
      </div>
    );
  }
};

Think about the following logic and create the necessary ternary expression.

If userAge is blank:
  show buttonOne
else:
 if userAge is greater or equal to 18:
   show buttonTwo
 else:
   show buttonThree
1 Like

So you don’t need a test for input being blank? I guess I got confused with what it was asking.

I guess the final test threw me.

Once a number has been submitted, and the value of the input is once again changed, the button should return to reading Submit.

I made a codepen while testing Note, contains solution!