Use-a-ternary-expression-for-conditional-rendering

JavaScript
1

Tell us what’s happening:
Why the terinary conditional operator is not working?

Your code so far

this.state.input >= 18 ? buttonTwo : buttonThree && buttonOne



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 >= 18 ? buttonTwo : buttonThree && buttonOne
        }
      </div>
    );
  }
};

Your browser information:

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

Link to the challenge:

1 Like
2

What do you mean by not working? It works fine. If you want both buttons to show up with && that’s not what && operand does. It returns the last thing, like 20 && 21 will give you 21. Try it in your console.

3

The ternary operator is usually used to assign things like this:

var day = new Date().getDay() === 1 ? "Monday" : "Not Monday";

var evenlyDivisble = a % b > 0 ? false : true;

You can also use it as a return value in a function like this:

function hello(isFriend) {
  return (isFriend ? "Hello again" : "Nice to meet you");
}
4

what I mean is, the code which I have written is not working and if you think you can make it work then please update your code.

5

Hey, yes I know how this conditional operator works but I have seen some complex code for this in stackoverflow.
Anyhow my question here is why the above code is not working?

I have seen in previous challenges that Boolean can be used like button1 && button2
that’s why I have written it like that and it is working fine only when you enter age greater than 18.
But the code is not working when age is less than 18.

6

The && operator isn’t how you concatenate objects in React. Also, each React object needs to be enclosed in a single parent object. Try putting your two <button> objects inside a <span>:

  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 >= 18 ? buttonTwo : <span>{buttonThree}{buttonOne}</span>}
      </div>
    );
  }
7

Why do you need this && anywhere there? What is it that’s not working? I didn’t make anything work, I just copypasted your code into existing react app without modifying any single line of code. And it shows “you shall not pass” button on change, when number is less than 18, and submit otherwise. Why do you need the third button and what’s not working I don’t really get.
Please describe expected behavior and actual one.

8
  • Once a number has been submitted, and the value of the input is once again changed, the button should return to reading Submit.

It seems you’re not considering this instruction in your conditional expression. To concatenate conditional expressions means something like (a<b?(c>d?a=1:a=2):a=3) (inner parenthesis for sake of clarity), so you have to consider the condition regarding < or > 18, and the condition regarding the above instruction :slight_smile:

10

I hope this will help you to understand my question.

11

Yes, I’m having the same syntax problem.

12 
 this.state.userAge == '' ? buttonOne : (this.state.input >= 18 ? buttonTwo : buttonThree)
4 Likes
13

I think the problem with this challenge is the wording. It took me a long time to understand that we are supposed to change the button to “you shall not pass” or “you can enter” ONLY when someone clicks on the “Submit” button. The hints didn’t make it clear enough.

2 Likes