React: Use a Ternary Expression for Conditional Rendering: What does it all mean

JavaScript
1

Tell us what’s happening:

I’m having trouble understanding the instructions.

Specifically, can anyone clarify what the following means:

"Once the component is rendering information to the page, users should have a way to interact with it. "

What does it mean for a component to render information to the page? What page? And what does “it” refer to - the component, the information or the page?

Next, clarification on the following:

“when the page first loads, render the submit button, buttonOne , to the page.”

What/where is the first page, and how do we know when it loads? What does it mean to “render the submit button to the page?” Which page? Since we are referring to the first page, there must be more than one page…where are the pages…what are the pages…where do we find them?

I think I understand the ternary operator, as I have used it in prior challenges in FCC, but I don’t understand the instructions specific to this exercise. (actually I am finding the instructions and explanations in this React section to be very vague and perfunctory in general).

thanks for considering my questions.

Your code so far


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

Your browser information:

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

Challenge: Use a Ternary Expression for Conditional Rendering

Link to the challenge:

2

I have not much experience with React, but this is “when the page load for the first time”, not a “first page” and “other pages” mentioned

Have you tried finding a different source to use complementary to FreeCodeCamp?
if here you are not understanding completely, maybe a different one will help clear your doubts

React is a really powerful tool, but it is pretty difficult too

1 Like
3

I am from mobile so please excuse typos.

Pseudo code example:


class App extends React.Component {
  
  render() {
      
    let allow = true; //in state or inside render
    //if allow Is from state, then this.allow ? And delete line above

 let isUser = true; // same as allow above

    return (<div>
       { allow && isUser  ? (<div> text yes</div>) : ( <div> text no</div>)  } 
    </div> )
}

working example

1 Like
4

Hi @ILM, thank you for the reply and clarification. Can you recommend other sources to try, in addition to FCC? The React section seems to me very similar to the JS ES6 section - in my case at least I think the concepts require much more explanation that is provided here on FCC.

5

there are different React tutorials on the youtube freecodecamp channel, maybe one of those can explain it better to you?
This is one of them, for example:

1 Like
6

I think what the challenge does explain is fine and reasonable.

The page is what you see on the right side in the preview, there is only one page, “first” means the first time, not the first page.

Technically “it” is the element the component renders. But in some sense, the user’s interaction with the element is interacting with all three things you listed.

What isn’t reasonable is the solution to this challenge and the complete lack of explanation of this sentence:

Recall that a ternary operator has three parts, but you can combine several ternary expressions together.

Simply saying that you can combine several ternary expressions together is not good enough, by far. It should show the syntax of a nested ternary.

I see no way the camper would be able to come up with the solution just based on that sentence alone. In my opinion, you are unlikely to just blindly guess the syntax if you haven’t seen it before. It isn’t even that clear that it is required for the solution.

2 Likes
7

@ILM, thank you! Looks good, I have started watching it already.

8

@lasjorg, indeed I have been blindly guessing throughout most of this React section, or peeking at the answers, but still not quite understanding…

1 Like
9

Can anyone explain the solution in pseudocode? It makes no sense to me…

10 
if this.state.userAge is an empty string
  show buttonOne
else
  if this.state.userAge it less than or equal to 18
  show buttonTwo
  else
  show buttonThree

Here is the nested ternary as an if/else.

if (this.state.userAge === '') {
  buttonOne
} else {
  if (this.state.userAge >= 18) {
    buttonTwo
  } else {
    buttonThree
  }
}

Here is a Ternary to If-else convert tool (can’t really vouch for it)

2 Likes
11

If you are wanting additional material, I really enjoyed the Scrimba Learn React workshop. Free and a completely different teaching experience than any other site around. scrimba.com and search for Learn React

1 Like
12

@skumbag, thanks for the info!

13

Thank you @lasjorg. Actually, I do understand the ternary expression - it’s everything else in the solution that I don’t understand! Anyway, I’m beginning to realize that this FCC curriculum on React seems to be set up to just give a feel for bits and pieces of React code without really explaining how it all works together…so I think I will have to seek out some other resources if I really want to learn React.

1 Like
14

OK, but the only thing you did wrong in the code you posted was the ternary code (and not using the state correctly in the ternary code).

But you should totally seek React knowledge from other places as well, just like the rest of the curriculum it isn’t a one-stop-shop.

1 Like