Ternary condition in react

JavaScript
1

how to know when the page first loads ?


const inputStyle = {
width: 235,
margin: 5
}

class CheckUserAge extends React.Component {
constructor(props) {
  super(props);
  // change code below this line
  this.state = {
    userAge: '',
    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 />
      {
        
      }
    </div>
  );
}
};

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:77.0) Gecko/20100101 Firefox/77.0.

Challenge: Use a Ternary Expression for Conditional Rendering

Link to the challenge:

2

When the userAge property of state is set to an empty string, its initial value.

1 Like