React class component setting state, getting parsing error for the "=" sign

Question

I am using create-react-app (unejected) with this code:

class App extends Component {
  state = {  
    path: 'some_string',
    organization: null,
    errors: null
  }
  componentDidMount() {
    this.onFetchFromGitHub(this.state.path);
  };
  ...

The code (the application) works as expected.
However I am getting an error in vscode:

Parsing error: unexpected token = eslint [134,9]

That is the "=" in:

state = {` 
     /|\
      |

which is highlight in vscode.
My understanding is that I can use this format instead of a constructor with bindings. As I said the app is working despite the error.

.eslintrc.yml

How is ESLint configured? Class properties need parsing with e.g. Babel, they're not supported by default (see e.g. https://github.com/babel/eslint-plugin-babel/issues/156). Have you read https://stackoverflow.com/q/42701440/3001761? — jonrsharpe, Oct 09 '20 at 14:13

score -1 · Answer 1 · answered Oct 09 '20 at 14:22

Which version of React are you using?

React introduced "hooks" in 16.8, and they largely replace the old "Component" class format.

See the introduction here: https://reactjs.org/docs/hooks-intro.html

Using hooks, your example above can be simplified to a function component:

const App = (props) => {
  // This replaces the this.state/this.setState from a component
  const [state, setState] = React.useState({  
    path: 'some_string',
    organization: null,
    errors: null
  });
  // This replaces the on mount
  React.useEffect(() => {
      onFetchFromGitHub(state.path);
  }, []);

  return ...
}

As for why your example does not work, I would suggest it is likely due to configuration of your IDE syntax highlighting. Check whether you have the right syntax plugins installed/active (es2015, react, etc.) and if your linter (if you have one) has the correct plugins and presets. Your code works fine in my IDE, with no errors.

score -1 · Accepted Answer · edited Oct 18 '20 at 12:29

-1

I fixed this by installing eslint. This gave a problem due to conflict with create-react-app so I had to pin package.json version of eslint to 6.6.0 and then delete package-lock.json and remove node_modules/ and then I got about 30 warnings (instead of one).

Finally I changed the source code to fix the unnecessary parens and ignore propType errors and finally I am error free.

edited Oct 18 '20 at 12:29

halfer

19,824
17
99
186

answered Oct 09 '20 at 21:06

Michael Durrant

93,410
97
333
497

React class component setting state, getting parsing error for the "=" sign

2 Answers2