Eslint captured an error, Parsing error: Unexpected token =

Question

Hello, I installed Eslint to capture the errors and check the code, but the same is picking up this error on line 28 "updateDay = () => {" where the problem is in this syntax with = before (), but I do not know what would be the correct syntax in this case, because I am still beginner in Js.

This is the error code:

28:15 error Parsing error: Unexpected token =

updateDay = () => {
    const date = new Date();
    this.setState({
        currentDate: date.getDate(),
        weekday: getWeekdayAsString(date),
    });
};

Here is the full code

import React from 'react';

import { getWeekdayAsString } from '../utils/dateTimeUtils';

class WeatherDisplay extends React.Component {   
    constructor() {
    super();

    this.state = {
      temperature: 22,
      degrees: 'c',
      forecast: 'parcialmente-nublado',
      weekday: 'Hoje',
      currentDate: null,
    };   }

  componentDidMount() {
    this.timerID = setInterval(() => this.updateDay(), 1000);   }

  componentWillUnmount() {
    clearInterval(this.timerID);   }

  updateDay = () => {
    const date = new Date();
    this.setState({
        currentDate: date.getDate(),
        weekday: getWeekdayAsString(date),
    });
};

  render() {
    const {
      temperature,
      degrees,
      forecast,
      weekday,
      currentDate,
    } = this.state;

    const icone = `/imgs/${forecast}.svg`;

    return (
      <div className="weather-display">
        <div className="weather-now">
          <img className="icon" src={icone} alt={forecast} />
          <span className="temperature">{temperature}
            <span className="degree">º{degrees}</span>
          </span>
        </div>
        <span className="weekday">{weekday} {currentDate}</span>
      </div>
    );   } }

export default WeatherDisplay;

Answer 1

Probably the question code is located within a class as a "Static Property", as below:

class Something {
  updateDay = () => {
    const date = new Date();
    this.setState({
      currentDate: date.getDate(),
      weekday: getWeekdayAsString(date),
    });
  };
  render() { // seu codigo de renderização }
}

If this is the case, this syntax uses the concept of "Static class properties" which is part of the es7 standard (not es6), and therefore not yet supported by Eslint without the help of a plugin.

In other words, you will need to edit your Eslint settings so that it works with the "Babel-Eslint" parser so that Eslint does the checks after the code has been transposed by Babel (which will convert the "Static Property" syntax into a function whose syntax Eslint will be able to interpret correctly).

Try installing Babel-Eslint with:

npm install babel-eslint --save-dev

And after that, edit the file . eslintrc by adding the following line:

{
  "parser": "babel-eslint",
  ...
}

Source: https://github.com/airbnb/javascript/issues/589

Answer 2

Make sure that the location where you declared Function is within the class of the component in question and outside another Function. Example of common error:

render() {

    updateDay = () => {
        const date = new Date();
        this.setState({
            currentDate: date.getDate(),
            weekday: getWeekdayAsString(date),
        });
    };

    return(<div></div>)

}

Answer 3

It seems to me that you are trying to use an "Arrow Function Expression", these should be made attached to a Scope, Pex:

const functionName = () => console.log('hello from functionName');

These functions are anonymous functions that are declared with the help of a variable (in the case of the example, check "functionName")

If you want to use an "Arrow Function statement" you can use it like this:

functionName() { console.log('hello from functionName'; }

these functions are functions with names that are normally declared in Objectthe and Classes, Pex:

Class ClassName {
    functionNAme() { console.log('hello from functionName'; }
}

which would then be used with:

const className = new ClassName();
className.functionName()

---

What Eslint is telling you, in this case, is that syntax is not expecting a = in this position, since you do not have a Scope behind the function name, it is waiting for this function to be of type "Arrow Function statement" instead of "Arrow Function Expression".