How to solve prop spreading is forbidden in custom route component?

Question

eslint: prop spreading is forbidden on line 3 and 6

const PrivateRoute = ({component: Component, ...rest}) => (
  <Route
    {...rest}
    render={(props) => (
        localStorage.getItem('user') ?
          <Component {...props} /> :
          <Redirect to={{pathname: '/login', state: {from: props.location}}} />
  )}
  />
);

score 19 · Answer 1 · answered Apr 27 '20 at 13:53

19

For ESLint is important which type of comment do you use, the legit one is:

/* eslint-disable react/jsx-props-no-spreading */

answered Apr 27 '20 at 13:53

Tomasz Waszczyk

1,580
3
20
42

2

This ... after banging my head against the wall for way too long. Comment type does matter apparently. – FMaz008 Dec 13 '20 at 00:14

score 17 · Accepted Answer · edited Apr 22 '21 at 02:07

17

ES lint discourages the use of prop spreading so that no unwanted/unintended props are being passed to the component. More details here: https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-props-no-spreading.md

To disable it for the particular file, you can put: /* eslint-disable react/jsx-props-no-spreading */ at the top line in your component file. For disabling it for all files, try this: Disable in EsLint "react / jsx-props-no-spreading" error in Reactjs

Edited comments as per answer below

edited Apr 22 '21 at 02:07

michaelward82

4,064
21
35

answered Nov 06 '19 at 08:50

Souvik Ghosh

3,824
10
45
64

1

thank u! i added a rule "react/jsx-props-no-spreading": ["error", {"custom": "ignore"}] and it solved the problem – Almaz Kaliev Nov 06 '19 at 09:09

How to solve prop spreading is forbidden in custom route component?

2 Answers2