Receiving a warning when using multiple validations in prop-types in React

25 views Asked by At

I'm working on a React component called TreeNode, which takes a prop named depth. The requirement is that the depth prop should not be less than 1. I have added the necessary prop-type validation using prop-types to ensure this constraint.

Here's a simplified version of the code:

const TreeNode = ({ depth }) => {
    ...
}

TreeNode.propTypes = {
    depth: (PropTypes.number.isRequired),
    depth: (props, propName, componentName) => {
        if (props[propName] < 1) {
            return new Error(
                `Invalid prop ${propName} supplied to ${componentName}. It must be greater than 0.`
            );
        }
    }
}

The above code works fine but raises a warning which is given below`

[eslint]
src\Components\TreeNode.js
  Line 42:5:  Duplicate key 'depth'  no-dupe-keys

Search for the keywords to learn more about each warning.
To ignore, add // eslint-disable-next-line to the line before.

WARNING in [eslint]
src\Components\TreeNode.js
  Line 42:5:  Duplicate key 'depth'  no-dupe-keys

webpack compiled with 1 warning

I am using prop-types library to do prop validation that can be found on prop-types

What can be done to prevent the following warning?

0

There are 0 answers