Prop spreading is forbidden warning in React

avatar

Borislav Hadzhiev

Last updated: Apr 27, 2022

banner

Photo from Unsplash

Prop spreading is forbidden warning in React #

The warning "Props spreading is forbidden" is caused when we use the spread syntax to unpack a props object when passing props to a component. To get around the warning, disable the eslint rule.

Here is an example of how the warning is caused.

App.js
const App = props => { // ⛔️ Prop spreading is forbidden eslint(react/jsx-props-no-spreading) return ( <div> <Button {...props} /> </div> ); }; export default App; function Button(props) { return <button {...props}>Click</button>; }

The best way to get rid of the warning is to disable the rule in your .eslintrc file.

.eslintrc.js
module.exports = { rules: { 'react/jsx-props-no-spreading': 'off', } }

Alternatively, you can disable the rule for a single file by adding the following comment at the top of your file.

App.js
/* eslint-disable react/jsx-props-no-spreading */ // ... your code here

The ESlint rule expects us to not use the spread syntax (...) to unpack an object when passing props, but instead pass single props to the component.

App.js
const App = props => { const {disabled, className} = props; // 👇️ only passing props directly return ( <div> <Button disabled={disabled} className={className} /> </div> ); }; export default App; function Button({disabled, className}) { return ( <button disabled={disabled} className={className}> Click </button> ); }

However, most of the time the rule is more of an annoyance than it actually helps, so it's best to just turn it off.

Conclusion #

The warning "Props spreading is forbidden" is caused when we use the spread syntax to unpack a props object when passing props to a component. To get around the warning, disable the eslint rule.

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.