Use a Ternary Expression for Conditional Rendering - Console error

JavaScript
1

Getting Console error while submitting the below code. I am not sure what I am missing here.

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

    </div>
  );
}
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/85.0.4183.102 Safari/537.36.

Challenge: Use a Ternary Expression for Conditional Rendering

Link to the challenge:

2

Hello there,

The issue is here:

// change code below this line
  this.state.userAge = '';
  this.state.input = ''; 
  // change code above this line

Hint: remember, React state is meant to be immutable.

Create a state object with this.state = { … }`

Hope this helps

1 Like