How to solve Prop spreading is forbidden warning in React

The topic of this article will be solutions to prevent Prop spreading is forbidden warning in React from appearing. Some solutions can be mentioned, for example, using eslint-disable to prevent warnings or editing rules in the .eslintrc.js file

The reason for the Prop spreading is forbidden warning 

This warning appears because Eslint detects that you are using prop spreading for the component. Since this warning is set by default for eslint, it will show a warning for you to revise your code. Follow the example code below.

Code:

import React from "react";
import Header from "./Header";

const App = (props) => {
    return (
        <div>
            <Header {...props} />
        </div>
    );
};

export default App;

import React from "react";

function Header(props) {
    return <div {...props}>Header</div>;
}

export default Header;

Output:

You can see that when we use prop spreading for the Header child component, the IDE will warn us according to the built-in rules. However, this is only a warning, not an error, so we can use the solutions in the next section to prevent this warning from appearing.

How to fix this error

Using eslint-disable to prevent warnings

If you want a project to have good enough code, you need to build coding conventions from the beginning for everyone to follow. Coding conventions don’t usually make code run faster, but they help maintain code that’s easier to read. Eslint is the best choice for projects. It allows us to customize the configuration according to our coding convention, check the coding style, and find bugs and other potential problems.

In this way, we will use eslint-disable to prevent the warning from happening. This is a way to prevent errors in eslint rules by commenting the disable statement before the error code.

Code:

import React from "react";
import Header from "./Header";

const App = (props) => {
    return (
        <div>
            <Header
                //eslint-disable-next-line react/jsx-props-no-spreading
                {...props}
            />
        </div>
    );
};

export default App;

However, the downside of this approach is that you will have to write it in multiple places with the same error to prevent these errors from appearing. You can refer to the following way to prevent Prop spreading is a forbidden warning throughout the project.

Editing rules in the .eslintrc.js file

This way, we will edit the rules section in .eslintrc.js to prevent the warning from appearing. If you have installed eslint but still do not see this file in the directory structure, you can use this command to create the file.

npx eslint --init

Then you go to the eslintrc.js file to edit the rules so the program can update the new error-checking rules.

Code:

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

After editing the file, you can rerun your React program to update the Eslint rules. Wish you success with the solutions given in the article.

Summary

To summarize, the article introduced you to two solutions to prevent Prop spreading is forbidden warning in React. However,the editing rules in the .eslintrc.js file solution will solve our problem completely.

Nathaniel Kirk

Hi, my name’s Nathaniel Kirk. I’m interested in learning and sharing knowledge about programming languages. My strengths are C, C++, Python, HTML, CSS, Javascript, and Reactjs. If you have difficulty with them, don’t worry. I’m here to support you.

---

Name of the university: PTIT
Major: IT
Programming Languages: C, C++, Python, HTML, CSS, Javascript, Reactjs