Use a Ternary Expression for Conditional Rendering-error debudding

Use a Ternary Expression for Conditional Rendering-error debudding
0

#1

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


#2

Why are you using setState method here? You should only use this outside the constructor.


#3

This is already set in the lesson. I did not write this part. But was able to solve it. Thank you!

Infact, only using the setState here is correct.

“this.state” must be used only in the constructor and this.setState can be used in the method as it has been done here!


#4

Just ignore my last comment. Somehow I read your code differently. I need to have my eyes checked I guess.