Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to resolve eslint error: "prop spreading is forbidden" in a custom route component?

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}}} />
  )}
  />
);
like image 579
Almaz Kaliev Avatar asked Nov 06 '19 08:11

Almaz Kaliev


People also ask

How do I fix prop spread is forbidden?

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.

Is missing in props Validationeslint?

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.


2 Answers

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

like image 93
Display name Avatar answered Sep 20 '22 13:09

Display name


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

/* eslint-disable react/jsx-props-no-spreading */ 
like image 30
Tomasz Waszczyk Avatar answered Sep 19 '22 13:09

Tomasz Waszczyk