One question on Render Conditionally from Props

I want to ask why counter property of the state doesn’t increments the value by 1 ?

  **My code so far**

class Results extends React.Component {
constructor(props) {
  super(props);
}
render() {
  {/* Change code below this line */}
  return <h1>{this.props.fiftyFifty === true ? "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 + 1
    }
  });
}
render() {
  const expression = Math.random() >= .5; // 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>
  );
}
}

So my question is maybe in this line:

handleClick() {
  this.setState(prevState => {
    // Complete the return statement:
    return {
      counter: prevState + 1
    }
  });
}
  **My browser information:**

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:92.0) Gecko/20100101 Firefox/92.0

Challenge: Render Conditionally from Props

Link to the challenge:

I don’t understand your question

this is changing counter and increasing it by one

But it’s not working

That is my question!! Why It’s not working?

You can try it by yourself.

prevState is an object, it is the previous state object, you need to get the counter property from there

1 Like

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