ESLint caught an error, Parsing error: Unexpected token =

Question

ESLint caught an error, Parsing error: Unexpected token =

Navigation

#1 by (0 votes)
#2 by (0 votes)
#3 by (0 votes)

0

Hello, I installed ESLint to catch the errors and check the code, but it is catching this error on line 28 "updateDay = () = > {" where the problem is in this syntax with the = before the () , but I do not know what the correct syntax would be in this case, as I'm still a 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 complete 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;

javascript react eslint

asked by anonymous 13.04.2018 / 07:30

3 answers

0

Make sure that the place where you declared the function is within the class of the component in question and outside of another function. Common error example:

render() {

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

    return(<div></div>)

}

16.04.2018 / 16:52

0

Probably the question code is located inside 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 (not es6) pattern, and therefore not yet supported by eslint without the help of a plugin. >

In other words, you need to edit your eslint settings so that it works with the parser "babel-eslint" so that the eslint checks after the code has been transpiled by babel (which will convert the syntax of the "static property" in a function whose syntax the eslint will be able to interpret correctly).

Try installing babel-eslint with:

npm install babel-eslint --save-dev

Then edit the .eslintrc file by adding the following line:

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

Source: link

16.04.2018 / 20:01

My extension does not work at all Help with strings read from C file

score 0 · Accepted Answer

It seems to me that you are trying to use an "Arrow Function expression", these should be done clinging 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, the const "functionName")

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

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

These functions are functions with names that are usually declared in Object os and Class es, pex:

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

which would then be used with:

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

What ESLint is saying to you in this case is that syntax is not expecting a = in that position, since you do not have a scope behind the function name, it is waiting for that function is of type "arrow function statement" instead of "arrow function expression".