How-to-render-conditionally-from-props(reactjs)

JavaScript
1

Tell us what’s happening:
Hello, I’m stuck on this problem where i’m asked :

Render the Results component as a child of GameOfChance , and pass in expression as a prop called fiftyFifty . In the Results component, write a ternary expression to render the h1 element with the text You Win! or You Lose! based on the fiftyFifty prop that’s being passed in from GameOfChance .

Your code so far


class Results extends React.Component {
constructor(props) {
  super(props);
}
render() {
  {/* Change code below this line */}
  return <h1>{this.props.counter}</h1>;
  {/* Change code above this line */}
}
}

class GameOfChance extends React.Component {
constructor(props) {
  super(props);
  this.state = {
    counter: 1
  };
  this.handleClick = this.handleClick.bind(this);
}
handleClick() {
  this.setState(prevState => {
    // Complete the return statement:
    return {
      counter: prevState + 1
    }
  });
}
render() {
  const expression = Math.random() >= .5 ? true : false; // Change this line
  return (
    <div>
      <button onClick={this.handleClick}>Play Again</button>
      {/* Change code below this line */}
    <Results fifyFifty={expression} />
      {/* Change code above this line */}
      <p>{'Turn: ' + this.state.counter}</p>
    </div>
  );
}
}

  **Your browser information:**

User Agent is: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/93.0.4577.82 Safari/537.36

Challenge: Render Conditionally from Props

Link to the challenge:

2

what part is giving you issues?

3

just read the description of exercise

4

It is great that you solved the challenge, but instead of posting your full working solution, it is best to stay focused on answering the original poster’s question(s) and help guide them with hints and suggestions to solve their own issues with the challenge.

We are trying to cut back on the number of spoiler solutions found on the forum and instead focus on helping other campers with their questions and definitely not posting full working solutions.

5

@ILM the const expression and the return statement on prevState. I’m trying to work out on the conditional and i’m abit lost there

6

here you don’t need the ternary, Math.random() >= .5 is already evaluated to true or false

ok, next step is

Render the Results component as a child of GameOfChance , and pass in expression as a prop called fiftyFifty .

which you did

then

In the Results component, write a ternary expression to render the h1 element with the text You Win! or You Lose! based on the fiftyFifty prop that’s being passed in from GameOfChance .

here you have access to this.props.fiftyFifty, which has value of true or false. Here you need to use the ternary.

Finally, make sure the handleClick() method is correctly counting each turn so the user knows how many times they’ve played.

and this seems you are doing correctly

1 Like
7

hello @ILM there is something wrong with the problem statement. In the handleClick setState. it is impossible to change or iterate the prevState due to the fact it isn’t in state form. In real sense nothing is going on in the code and the solutions aren’t running anything.

class GameOfChance extends React.Component {
constructor(props) {
super(props);
this.state = {
counter: 1
};
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
this.setState(prevState => {
// Complete the return statement:
return {
counter: prevState + 1
}
});
}

8

remember that prevState is the state object, you need to access the property you are interested in

1 Like
9

I see, i have rectified it. thank you @ILM

10

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.