React - Render Conditionally from Props

JavaScript
1

Tell us what’s happening:
I was working around this problem but wasn’t passing one test which is

Each time the button is clicked, the counter state should be incremented by a value of 1, and a single p element should be rendered to the DOM that contains the text Turn: N , where N is the value of the counter state.

I had to look at the hint and hint says this.state.counter + 1 . I am confused because isn’t counter: prevState += 1 as I am adding +1 to what was prevState

Your code so far

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: 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>
    );
  }
}

Your browser information:

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

Challenge: React - Render Conditionally from Props

Link to the challenge:

2

Add a console log and see what is prevState.

is it an object with a property counter?

prevState.counter + 1

Probably you don’t want to add 1 to prevState but rather to the counter property.

Ok, if this is confusing so far:

The initial state is an object with a property counter, see the constructor.

    this.state = {
      counter: 1
    };

that mean any prevState is going to be an object

{
  counter: Number -> whatever state is at that point in time in your app
};

Hope this helps.

3

I agree with George, but I’d also point out that the use of += is odd here:

You would use that if you wanted to change prevState, to add 1 to it. But we don’t want to do that. We want the entire expression to evaluate to that. You just need + for that. I mean, I think yours will end up working because it still evaluates to that, but it is not best practice.

4

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