eslint strange error when using redux

Question

I got this warning from eslint, I'm using create-react-app.

./src/components/auth.js
  Line 24:  Unexpected labeled statement                                           no-labels
  Line 24:  'authenticated:' is defined but never used                             no-unused-labels
  Line 24:  Expected an assignment or function call and instead saw an expression  no-unused-expressions

And I think I don't have any problem with my component below, it's so annoying

import React, { Component } from 'react';
import { connect } from 'react-redux';

export default function(ComposedComponent) {
  class Authentication extends Component {

    componentWillMount() {
      if (!this.props.authenticated) {
        this.props.history.replace('/login');
      }
    }

    componentWillUpdate(nextProps) {
      if (!nextProps.authenticated) {
        this.props.history.replace('/login');
      }
    }

    render() {
      return <ComposedComponent {...this.props} />
    }
  }

  return connect(state => {authenticated: state.auth.authenticated})(Authentication);
}

I've no clue what should be fixed, first time using eslint.

Answer 1

When you are writing this, javascript is confused.

It is seeing an arrow function that is returning the instruction authenticated: state.auth.authenticated which is a wrong instruction.

---

You can write either :

connect(state => ({ 
     authenticated: state.auth.authenticated,
}));

We add parenthesis to tell javascript that this is not an instruction but a json.

Or

connect((state) => { 
   return {
     authenticated: state.auth.authenticated,
   };
});