javascript - create-react-app / babel / binding state and functions

Question

Thank you for your time. I have the same issue as in this issue re parsing error - unexpected token = eslint on (originally state - which was fixed by putting in constructor, now) handleClick. New project and think this error will continue through the rest of the project.

class Header extends Component {
  constructor() {
    super();
    this.state = {
      activeItem: "home"
    };
  }
  
  handleClick = (event, { name }) => this.setState({ activeItem: name });
  

I am new to react, and apologise if this is a simple question. Project was installed with create-react-app, there is no babelrc file, the eslint is as follows.

module.exports = {
  env: {
    browser: true,
    es2021: true,
    jest: true,
  },
  extends: ["plugin:react/recommended", "airbnb", "prettier"],
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 12,
    sourceType: "module",
  },
  plugins: ["react"],
  rules: {},
};

From what i have read, I have to install babel to the project, and customise the config to accept state = { activeItem: "home" }; if I want to set state / functions outside the constructor and need to use a 'basic syntax', for fixing the function, i am not sure what that basic syntax is. Help?! I think the course of action is to create a babelrc config file, but am not sure why if it is already installed with create-react-app and do not want to install a bunch of dependencies unless i have to.

Thank you for your patience.

Answer 1

It looks like you need to fix up your ESlint config a bit:

npm install eslint @babel/core @babel/eslint-parser --save-dev

and then add

parser: "@babel/eslint-parser",

to the top level of your ESLint config. Alternatively you could use the default Create React App ESLint config by removing yours, which should be all set already.