How do I solve the problem?

Tell us what’s happening:
“Render Conditionally from Props”
Describe your issue in detail here.

I just started to solve the problem involving Conditionality From Props in react. I did a few researches on Google and I figured out how to start solving the problem. But I’m a bit lost now. I don’t have a clue in how I’ll be able to solve the second part of the challenge.
Your code so far

class Results extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    {/* Change code below this line */}
    return <h1>{this.state.fiftyFifty? "You Win!": "You Lose!"}</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
      }
    });
  }
  render() {
    const expression = null; // Change this line
    return (
      <div>
        <button onClick={this.handleClick}>Play Again</button>
        {/* Change code below this line */}

        {/* Change code above this line */}
        <p>{'Turn: ' + this.state.counter}</p>
      </div>
    );
  }
}

Your browser information:

User Agent is: Mozilla/5.0 (iPhone; CPU iPhone OS 15_7_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.6.3 Mobile/15E148 Safari/604.1

Challenge: React - Render Conditionally from Props

Link to the challenge:

I notice a few things:

return <h1>{this.state.fiftyFifty? "You Win!": "You Lose!"}</h1>;

You are looking for that value on state. But if it’s being passed in from another component, it will be on props. Other than that, this looks right.


  handleClick() {
    this.setState(prevState => {
      // Complete the return statement:
      return {
        counter: prevState
      }
    });
  }

Is that how you want to update that counter?

This is your initial state:

{
  counter: 1
};

It is an object with a property “counter”. So, that is the shape that prevState will have. So, you are returning the new state as an object with a property “counter” … and you are telling it that that property “counter” will also now have the shape of the previous state, object with a property “counter” . This will keep building out the object, bigger and bigger. We want the new state to be an object with a property “counter”. We want that “counter” to be a number. How is it related to the prevState?

1 Like

Then you need to handle these:

Now you have an expression that you can use to make a randomized decision in the code. Next you need to implement this. 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 . Finally, make sure the handleClick() method is correctly counting each turn so the user knows how many times they’ve played. This also serves to let the user know the component has actually updated in case they win or lose twice in a row.

You haven’t attempted those yet. Do you have a specific question?

Sorry, I guess I listed the parts you didn’t do incorrectly, but you get the idea - let us know what is confusing you.

1 Like

@kevinSmith I’m close to pass the challenge but I’m stuck in this part of the test


handleClick() {
    this.setState(prevState => {
      // Complete the return statement:
      return {
        counter: prevState
      }
    });

Tell us what’s happening:
Describe your issue in detail here.

I’m close to pass the challenge but I don’t know how to solve “prevState part.

class Results extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    {/* Change code below this line */}
    return <h1>{this.props.fiftyFifty ? "You Win!": "You Lose!"}</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: this.state.counter +1
   prevState   
         
        
      }
    });
  }
  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 fiftyFifty ={expression}/>
        {/* Change code above this line */}
        <p>{'Turn: ' + this.state.counter}</p>
      </div>
    );
  }
}

Your browser information:

User Agent is: Mozilla/5.0 (iPhone; CPU iPhone OS 15_7_2 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.6.4 Mobile/15E148 Safari/604.1

Challenge: React - Render Conditionally from Props

Link to the challenge:

I’m really confused here. I didn’t figure it out. I studied and did my researched I’m still stuck. Please show me how I can finish this stage.

handleClick() {
this.setState(prevState => {
// Complete the return statement:
return {
counter: this.state.counter +1
prevState

You have two issues with your code.

No.1:
You don’t need this prevState here

The task is to update count by 1 which is this part here

No.2:
This isn’t supposed to be 5 here

Re read the directions more carefully again to fix that mistake

Directions:
This method returns a value between 0 (inclusive) and 1 (exclusive) each time it is called. So for 50/50 odds, use Math.random() >= .5 in your expression.

Hope that helps

1 Like

Thanks a lot. I’ve solved the problem :+1:t4:

1 Like