CODEWITHSUNDEEP
reactjsreduxreact-reduxeslint
benihana21
benihana21

Reputation: 168

How do I resolve eslint conflict between props and module imports with the same name?

I'm using react with react-redux and eslint. In my container, I import an action that will be bound to the component's props in mapDispatchToProps like so:

// simplified for brevity
import { getGames } from '../actions/game';

const mapDispatchToProps = dispatch => ({
  getGames: () => dispatch(getGames())
});

class App extend React.Component {
  // class members
}

export default App connect(mapDispatchToProps)(App);

I call getGames in componentDidMount:

  componentDidMount () {
    const { getGames } = this.props;
    getGames().then(json => console.log(json));
  }

Eslint insists that I use object destructuring to pull values from this.props in componentDidMount, which is fine.

The problem is, eslint also complains that getGames is already declared in the outer scope (the import statement) when I do use object destructuring.

I'd like to appese eslint in both cases, but can't think of how I'd use object destructing in both the import and the this.props destructure without causing a naming conflict.

Any ideas are much appreciated!

Upvotes: 0

Views: 214

Answers (1)

Rikesh Subedi
Rikesh Subedi

Reputation: 1855

// simplified for brevity
import { getGames } from '../actions/game';

you can use alias for it.

import { getGames as getGames1 } from '../actions/game';

and use alias instead.

Upvotes: 2

Related Questions