React: arrow function in class, what linter doesn't like?

Question

React

I use a class to get data on the API, otherwise I try to write everything on functions.
In the class, I process the data a little before returning it to the display.

Here is an example of processing:

transformPerson = (person) => {
    return {
      id: this.getId(person),
      name: person.name,
      gender: person.gender,
      birthYear: person.birthYear,
      eyeColor: person.eyeColor,
    };
  }

ESLint underlines the assignment sign and writes "Unexpected token" (without the error number) in the pop-up window. What does he not like and how can it be fixed?


UPD:
Based on the totality of answers, the issue was resolved as follows:
1) installed the babel-eslint parser:
npm i -D babel-eslint
2) added .eslintrc.json to the linter config:
parser: 'babel-eslint'

Answer 1

This syntax (class properties or something like that) is not yet included in the standard, so the interpreter crashes on this line. IfNT should be configured to handle this syntax. Google class properties eslint setup.