Menu
How can I resolve the eslint error: "prop spreading is forbidden" in a custom route component?
This error occurs on lines 3 and 6 below:
const PrivateRoute = ({component: Component, ...rest}) => (
<Route
{...rest}
render={(props) => (
localStorage.getItem('user') ?
<Component {...props} /> :
<Redirect to={{pathname: '/login', state: {from: props.location}}} />
)}
/>
);
579
The best way to get rid of the warning is to disable the rule in your . eslintrc file. Copied! Alternatively, you can disable the rule for a single file by adding the following comment at the top of your file.
To fix the 'React eslint error missing in props validation' when developing a React app, we can set the prop types of the props in the component causing the error. to import the prop-types package to let us add prop type validation to the Foo component.
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
93
For ESLint is important which type of comment do you use, the legit one is:
/* eslint-disable react/jsx-props-no-spreading */ If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
