‘state’ is not defined no-undef

I use a tutorial to learn React and I got stuck pretty quickly. In the tutorial they use this code:

import React, { Component } from "react";

class Counter extends Component {
  state = {
    count: 0,
  };

  render() {
    return (
      <React.Fragment>
        <span>{this.state.count}</span>

        <button>Increment</button>
      </React.Fragment>
    );
  }
}

export default Counter;

And everything works great.

But in my case, I get this error:

srccomponentscounter.jsx Line 4:3: ‘state’ is not defined no-undef Search for the keywords to learn more about each error.

After trying everything, I think it’s because of the react version (They use an older version).

So my question is how to fix this error, And what has actually changed between the versions that prevents my code from working. Tnx!

Answer

This is an issue not related to react itself but projects created using create-react-app I believe. The ongoing issue is discussed in comments and it has worked for some people by simply re-using the command itself to create a new project but still a comment by maintainers is awaited. So it’s not something you did wrong. Chill.

I have been tracking this since yesterday and even tweeted about the same. Some dependency might have been messed up. Probably eslint or one of babel plugins.

The link to the issue – https://github.com/facebook/create-react-app/issues/10598