[SPOILER] (beta:react) ternary expression for conditional rendering

Tell us what’s happening:

not really an issue, just not sure if my solution is optimal. Is there a simpler way to do this?

SPOILER WARNING!

Your code so far

  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 && 1*this.state.userAge < 18 ? buttonThree : this.state.userAge && 1*this.state.userAge >= 18 ? buttonTwo : buttonOne
        }
      </div>
    );
  }

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.186 Safari/537.36.

Link to the challenge:

Checking for the existence of this.state.userAge twice is a bit of a waste. It could be simplified to

this.state.userAge ?
    <<check the age>>
        :
    <<render buttonOne>>

I assume that you’re multiplying userAge by 1 to coerce the string into a number, but that’s not idiomatic JavaScript. Using Number is best to communicate your intention, and + is the normal shorthand. Here’s my solution:

this.state.userAge ?
            +this.state.userAge >= 18 ?
                buttonTwo
                  :
                buttonThree
              :
            buttonOne
11 Likes

I didn’t know you could nest ternaries (or that + is the prefered shorthand). Thank you!

Hi there PortableStick,
Thanks for your response!
Would you please explain the logic of your code ?
Is this.state.userAge ? equivalent to checking if the page loaded?
How would you have written the less elegant solution?

EDIT:
After some more searching found the answer.
PortableStick’s code is equivalent to:
this.state.userAge?
(this.state.userAge >= 18 ? buttonTwo : buttonThree)
: buttonOne

However, I still don’t understand what this.state.userAge? checks for.
Is it checking if an value exists?

1 Like

It’s evaluating the truthiness of the value. Basically, if the value is 0, "", null, undefined, or NaN, then the result will be false.

1 Like

Got it.
Thanks for your help!

1 Like

this.state.userAge is the value that we pass onto the setState when we enter the age in the input box in the console.We take this value from the above state that is the handleChange.In other words the value is just passed down to the submit method from the handleChange method.If that age is greater than 18 then button two should be shown otherwise button one should be shown. It is not checking the truthfulness by itself. It is passed at a place in a ternary operator which when true executes the condition next to the ? if not it executes the condition next to the colon.
Hope that clears things up a bit.

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 = Submit;
const buttonTwo = You May Enter;
const buttonThree = You Shall Not Pass;
return (


Enter Your Age to Continue




{this.state.userAge == ‘’? buttonOne: this.state.userAge>=18?buttonTwo:buttonThree}
{
/* change code here */
}

);
}
};

The simplest way I came up with treated the conditional statements as if they were in an “if, else if, else” series…

{ !this.state.userAge ? buttonOne : this.state.userAge >= 18 ? buttonTwo : buttonThree }

1 Like