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 7...

7. Use container components

Why?

It's a known pattern and you get the added benefit of decoupling your components from the redux store, making them easier to be reused.

Why not?

You now need two files per component.

How?

// FilterButton.jsx

export default function FilterButton({ setFilter }) {
  return (
    Click
  );
}

// FilterButtonRedux.jsx

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

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