React #42, not going through

JavaScript
1

Hi everyone. Can you tell what’s wrong with my code?
Other than this.setState(() => {counter: this.state.counter++} // Change this line
);
the rest is like the answer, but there’s something I’m not doing right… what is it? and would you use the arrow function for counter or what it’s in the answer?
Thanks.

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(() => {counter: this.state.counter++} // Change this line
  );
  console.log(this.state)
}
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 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.88 Safari/537.36.

Challenge: Render Conditionally from Props

Link to the challenge:

2

Hi,

this.setState({ counter: this.state.counter++ })

should work.

Best regards,
Thorsten

1 Like
3 
handleClick() {
  this.setState(() => {counter: this.state.counter++} // Change this line
  );
  console.log(this.state)
}

There are some problems here. First of all, when you want to do an implicit return or an object from an arrow function, you have to wrap it in parenthesis. If JS sees:

() => { prop: 1 }

it sees that curly brace and assumes that it is a code block, so (in this case) it ends up returning undefined, so your setState does nothing. To return an object, you would need:

() => ({ prop: 1 })

This is only for arrow functions returning an object as an implicit return. This would be fine:

() => { return { prop: 1 } }

Next, how you’re incrementing bothers me:

() => {counter: this.state.counter++}

As stated, you are returning undefined so the setState is doing nothing, but in reality, you are incrementing the counter directly on state. (Remember that the increment operator changes the operand.) This is a big no-no - React should handle that. Furthermore, if you’re going to use the functional form of setState (as opposed to passing it an object) you should use the passed in state. I would expect to see:

oldState => ({ counter: oldState.counter + 1 })

Lastly, you have console.log(this.state) after the setState. Remember that setState is async, so there is no guarantee that state will be updated by the time that that console.log is run. Fortunately, setState will take a function as a second parameter that will run after state is updated.

When I make these changes, the code passes for me.

1 Like
4

Fantastic explanation. Thank you Kevin, you rock.