Warning: session_start(): open(/tmp/sess_45d2029f6b0cbd73770babf35351dacc, O_RDWR) failed: Disk quota exceeded (122) in /home/wvyrfnwn/learnshareit.com/wp-content/plugins/learnpress/inc/class-lp-page-controller.php on line 1007

Warning: session_start(): Failed to read session data: files (path: /tmp) in /home/wvyrfnwn/learnshareit.com/wp-content/plugins/learnpress/inc/class-lp-page-controller.php on line 1007

Warning: ftp_nlist() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 420

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_nlist() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 420

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 719

Warning: ftp_nlist() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 420

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_nlist() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 420

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 719

Warning: ftp_mkdir() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 562

Warning: ftp_nlist() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 420

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230
No duplicate props allowed warning in React - LearnShareIT

No duplicate props allowed warning in React

No duplicate props allowed warning in React

This article will show you how to prevent the No duplicate props allowed warning in React from appearing, some of which are effective such as keeping only one Prop or changing the project’s rules.

What causes the No duplicate props allowed warning in React?

Let’s first come to the reason why this warning appears. As you write code, you sometimes don’t notice and write and pass multiple identically named props to a component or with attributes.

Code:

import React from 'react';
 
const App = () => {
  return (
    <>
     <h2 id="title" id="title" >No duplicate props allowed warning in React | LearnShareIT</h2>
    </>
  );
};
 
export default App;

Output:

When you run the project, webpack will detect, like the example above, that the h2 tag has two id attributes, giving you a warning. No duplicate props are allowed even though the program is still running normally. However, you should correct this warning so the program can run as well as possible.

How to prevent this warning?

Keeping only one Prop 

Currently, Prop is an acronym for Properties. Props are similar to Attributes of HTML tags, so most attributes like id, class name, and color can also be considered as props of <h2> tags. 

We will always follow the example of the error we have just encountered above. In this way, we will remove duplicate attributes and keep only the most accurate ones to prevent the warning from happening.

Code:

import React from 'react';
 
const App = () => {
  return (
    <>
     <h2 id="title">No duplicate props allowed warning in React | LearnShareIT</h2>
    </>
  );
};
 
export default App;

Output:

You can see that when I removed and kept only a unique id for the title tag, the program usually ran, and there were no more errors. Or you can refer to how to do it below.

Change the project’s rules method.

ESLint is the most harmonized tool and the best choice for projects. It allows us to customize the configuration according to our coding conventions, check the coding style, and find bugs and other potential problems.

ESLint is, even more an extremely appropriate choice if we use ES2015 as well as JSX (React). Out of all the linters, it is the best ES2015 JSX supporter and the only one currently supporting JSX.

Terminal:

npm install --save-dev eslint

After we have finished installing, you can access the eslintrc.json file to reconfigure the rules for a specific project. You will add rules for the project like the ones below.

Code:

"rules": { "react/jsx-no-duplicate-props": [1, { "ignoreCase": false }] }

After you make changes, close the program and rerun it to see the results. Warning no longer appears, and the program runs typically. I hope these methods will help you.

Summary

To sum up, this article has shown you some ways to avoid No duplicate props allowed warning in React. However, I recommend removing duplicate props so the program can run perfectly.

Maybe you are interested:

Leave a Reply

Your email address will not be published. Required fields are marked *