react/jsx-no-duplicate-props

Disallow the same prop twice on one JSX element

When a prop is written twice, the last one wins and the first is silently dropped. That's nearly always a leftover from an edit or a merge.

Configure#

Off by default. To turn it on:

bunfig.toml
[lint.rules]
"react/jsx-no-duplicate-props" = "error" # or "warn"

Every option, set to its default:

bunfig.toml
[lint.rules]
"react/jsx-no-duplicate-props" = ["error", {
  ignoreCase = false,
}]

Examples#

example.jsx1 problem
const field = <Input name="email" type="text" name="username" />;
example.jsxNo problems
const field = <Input name="email" type="text" />;

Options#

OptionDefaultWhat it does
ignoreCasefalseTreat names that differ only in case, such as onClick and onclick, as the same prop.
example.jsxwith { "ignoreCase": true }1 problem
const button = <Button onClick={save} onclick={save} />;