duplicateProps

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

This rule should generally always be enabled as duplicate props are almost always a mistake. The only scenario where you might want to disable it is if you’re using advanced JSX transformations that intentionally rely on duplicate props for some specific behavior.

Further Reading

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

Equivalents in Other Linters

• Deno: jsx-no-duplicate-props