Unexpected token React-Redux

Question

I REALLY don't know why i am getting this syntax error:

30 | })
31 | */
32 | function mapStateToProps(state) {
| ////////////////// ^
33 | return {
34 | count: state.count
35 | }

**Here is my code: **

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

class Counter extends React.Component {

  increment = () => {

  }

  decrement = () => {

  }

  render() {
    return (
      <div>
        <h2>Counter</h2>
        <div>
          <button onClick={this.decrement}>-</button>
          <span>{this.props.count}</span>
          <button onClick={this.increment}>+</button>
        </div>
      </div>
    )
  }

  /* This try is showing me the same error in the same place
  const mapStateToProps = state => ({
    count: state.count
  })
  */
  function mapStateToProps(state) { //This is the line. Right in the "m"
    return {
      count: state.count
    }
  }

}

export default connect(mapStateToProps)(Counter);

I am trying this guide: https://daveceddia.com/how-does-redux-work/

ArdentLearner · Accepted Answer · 2018-05-28T20:38:17.350

1

Your issue here is using the function keyword. Classes can only contain prototypal methods and a constructor (as of ECMAScript 2015). Normally if you declaring a method within a class you'd have:

  mapStateToProps(state) { //This is the line. Right in the "m"
    return {
        count: state.count
    }
}

or use an arrow function

 mapStateToProps = (state)=> { //This is the line. Right in the "m"
        return {
            count: state.count
        }
    }

EDIT

As mentioned in later answers you need to move your map to state declaration from within the class.

Then you can have

const mapStateToProps = (state)=> { //This is the line. Right in the "m"
            return {
                count: state.count
            }
        }

should you decide to go with an arrow function.

edited May 28 '18 at 20:38

answered May 28 '18 at 20:26

ArdentLearner

712
7
20

Thank you! Now i have another question... I read that i should use, for example, `this.increment= this.increment.bind(this)`. Why? And why i can just don't use it in my Counter class? – boludo kid May 28 '18 at 21:07
You bind `this` so that the method is always called with that particular `this` i.e. when you call this method in a different scope say inside another function it doesn't use that function's this. It instead uses the `this` you bound. This will ensure you are always using the component's `this` hence you'll be able access things like state(`this.state`) or anything else in that component for that matter. If you use arrow functions you won't need to bind as it will be done for you. – ArdentLearner May 28 '18 at 21:13
It's basically a cleaner provided by react for achieving this https://stackoverflow.com/questions/4886632/what-does-var-that-this-mean-in-javascript – ArdentLearner May 28 '18 at 21:17

score 1 · Answer 2 · answered May 28 '18 at 20:29

1

You are declaring a function within a class:

class Counter extends React.Component {

  // ...

  function mapStateToProps(state) {
    // ...
  }

}

which is invalid JS syntax. Move the function declaration outside the class:

class Counter extends React.Component {

  // ...

}

function mapStateToProps(state) {
  // ...
}

answered May 28 '18 at 20:29

nem035

34,790
6
87
99

Thank you! Now i have another question... I read that i should use, for example, `this.increment= this.increment.bind(this)`. Why? And why i can just don't use it in my Counter class? – boludo kid May 28 '18 at 21:07
See: https://medium.freecodecamp.org/react-binding-patterns-5-approaches-for-handling-this-92c651b5af56 and https://reactjs.org/docs/handling-events.html and https://stackoverflow.com/questions/48385848/best-practice-in-react-regarding-the-context-this/48385965 – nem035 May 28 '18 at 21:29

score 1 · Answer 3 · answered May 28 '18 at 20:34

Move the following code outside the definition of the class "Counter":

function mapStateToProps(state) { //This is the line. Right in the "m"
    return {
        count: state.count
    }
}

This solves both the problem of the invalid function keyword inside a class and the second problem, which you would encounter soon after, that the mapStateToProps function isn't directly accessible if you put it inside the class "Counter".

Write it like that and it should work:

class Counter extends React.Component {
    ...
}

function mapStateToProps(state) { //This is the line. Right in the "m"
    return {
        count: state.count
   }
}

export default connect(mapStateToProps)(Counter);

score 0 · Answer 4 · answered May 28 '18 at 20:31

0

You need to put mapStateToProps outside class Counter. As mapStateToProps is another separated function not belonged to Counter.

answered May 28 '18 at 20:31

inDream

1,277
10
12

Unexpected token React-Redux

4 Answers4

EDIT