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

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

#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:
https://learn.freecodecamp.org/front-end-libraries/react/use-a-ternary-expression-for-conditional-rendering


#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

#5

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


#6

Not necessary, because it will always contain something once you start typing in the textfield. It is only once you click the button that the button’s text needs to change which is based on userAge.


#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!