propDuplicates

Disallow duplicate props in JSX elements.

✅ This rule is included in the jsx logical preset.

When a JSX element has multiple props with the same name, only the last occurrence takes effect. This can lead to unexpected behavior and makes the code harder to understand and maintain. Duplicate props are typically the result of copy-paste errors or merge conflicts that were not properly resolved.

Examples

❌ Incorrect

<div id="first" id="second">
  Content
</div>

<button className="btn" onClick={handleClick} className="btn-primary">
  Click me
</button>

<input type="text" name="field" type="email" />

✅ Correct

<div id="unique">Content</div>

<button className="btn-primary" onClick={handleClick}>
  Click me
</button>

<input type="email" name="field" />

Options

This rule is not configurable.

When Not To Use It

If your codebase uses code generation that relies on uncommon JavaScript semantics such as duplicate prop names, this rule might not be for you.

Further Reading

• React Documentation: JSX In Depth
• MDN: Working with objects

Equivalents in Other Linters

• Deno: jsx-no-duplicate-props
• ESLint: jsx-a11y/no-duplicate-props