Avoid no-shadow eslint error with mapDispatchToProps

Question

I have the following component that triggers a no-shadow ESlint error on the FilterButton props.

Answer 1

Option number six.

6. Disable the es-lint rule for the specific line(s) of code

import { setFilter } from '../actions/filter';


// eslint-disable-next-line no-shadow
function FilterButton({ setFilter }) {
  return (
    Click
  );
}

export default connect(null, { setFilter })(FilterButton);

or

import { setFilter } from '../actions/filter';


/* eslint-disable no-shadow */
function FilterButton({ setFilter }) {
/* es-lint-enable */
  return (
    Click
  );
}

export default connect(null, { setFilter })(FilterButton);

The second way to temporarily disable the es-lint rule can be used for multiple lines of code, unlike the first one. It can be useful if you pass more arguments and divide them into multiple lines of code.

Why?

This is an easy and suitable option for some use-cases (for example, your team/organization uses specific es-lint settings and it is discouraged/forbidden to modify those settings). It disables the es-lint error in the line(s) of code but does not influence on mapDispatchToProps syntax and the rule is still completely active outside the line(s) of code.

Why not?

You do not want or you are forbidden to bloat your code with such kind of comments. You do not want or you are forbidden to influence es-lint behaviour.