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

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

#1

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:


#2

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

#3

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


#4

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?


#5

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


#6

Got it.
Thanks for your help!


#8

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.