Use a Ternary Expression for Conditional Rendering REACT

Use a Ternary Expression for Conditional Rendering REACT
0.0 0


Tell us what’s happening:
I can get the button to render given the user’s input, but the instructions on how to have each button show up separately are confusing. Please help :slight_smile:

Your code so far

const inputStyle = {
  width: 235,
  margin: 5

class CheckUserAge extends React.Component {
  constructor(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) {
      userAge: ''
  submit() {
      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 (
        <h3>Enter Your Age to Continue</h3>
          onChange={this.handleChange} /><br />
          /* change code here */
        {this.state.input >= 18 && this.submit ?  buttonTwo : buttonThree }

Your browser information:

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

Link to the challenge:



You have to check if there’s an empty string on userAge, if it is, then print button one; if it’s not, check for the other two conditions. This way you only print one button at a time.


SpaniardDev is correct you have to include a condition like this.state.userAge==="" in your ternary operator to check if its empty then other directives conditional should follow.