In Chapter 7 react state this.strikes is undefined

programming web dev
1

When I run the following code from chapter 7

 class LightningCounter extends React.Component {
        constructor(props) {
          super(props);
          this.state = {
            strikes: 0,
          };
        }

        timerTick() {
          console.log(this)
          this.setState({
            strikes: this.state.strikes + 100,
          });
        }
        componentDidMount() {
            
            setInterval(this.timerTick, 2000);
        }

        render() {
          return <h1>{this.state.strikes}</h1>;
        }
      }

There happens an error, because this in setInterval becomes window context, however it it just runs the function without setInterval it works correctly.

2 
this.state = {
strikes: 0
};
this.timerTick = this.timerTick.bind(this)

This solves the problem (the solution provided later in the chapter), however, why list code that doesn’t work? Or it used to work before? Thanks.

4

Hi @daniil.ustimencko - what edition of the book are you in? I looked at the content in the 2nd edition, and I did this deliberately to highlight the need to use bind a few paragraphs later. I may revisit this approach in a future edition where I make the code work from the beginning and call out the bind angle.