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?