jsx-no-duplicate-props.md

solid/jsx-no-duplicate-props

Disallow passing the same prop twice in JSX. This rule is an error by default.

View source · View tests

Rule Options

Options shown here are the defaults.

{
  "solid/jsx-no-duplicate-props": ["error", { 
    // Consider two prop names differing only by case to be the same.
    ignoreCase: false, 
  }]
}

Tests

Invalid Examples

These snippets cause lint errors.

let el = <div a="a" a="aaaa" />;
 
let el = <div a="a" {...{ a: "aaaa" }} />;
 
let el = <div {...{ a: "aaaa" }} a="a" />;
 
let el = <div a="a" {...{ a: "aaaa" }} />;
 
let el = <div class="blue" class="green" />;
 
let el = <div class="blue" {...{ class: "green" }} />;
 
let el = (
  <div children={<div />}>
    <div />
  </div>
);
 
let el = <div innerHTML="<p></p>" textContent="howdy!" />;
 

Valid Examples

These snippets don't cause lint errors.

let el = <div a="a" b="b" />;

let el = <div a="a" {...{ b: "b" }} />;

let el = <div a="a" {...{ b: "b" }} />;

let el = <div a="a" A="A" />;

let el = <div a="a" {...{ A: "A" }} />;

let el = <div class="blue" />;

let el = <div children={<div />} />;

let el = (
  <div>
    <div />
  </div>
);