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

JavaScript
1

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:

2

My mistake. I am initialising state incorrectly.

3

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>
    );
  }
};
4

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
5

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

7

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!