no-react-specific-props.md

solid/no-react-specific-props

Disallow usage of React-specific className/htmlFor props, which were deprecated in v1.4.0. This rule is a warning by default.

View source · View tests

Tests

Invalid Examples

These snippets cause lint errors, and all of them can be auto-fixed.

let el = <div className="greeting">Hello world!</div>;
// after eslint --fix:
let el = <div class="greeting">Hello world!</div>;
 
let el = <div className={"greeting"}>Hello world!</div>;
// after eslint --fix:
let el = <div class={"greeting"}>Hello world!</div>;
 
let el = <div className="greeting" />;
// after eslint --fix:
let el = <div class="greeting" />;
 
let el = (
  <div many other attributes className="greeting">
    Hello world!
  </div>
);
// after eslint --fix:
let el = (
  <div many other attributes class="greeting">
    Hello world!
  </div>
);
 
let el = <PascalComponent className="greeting">Hello world!</PascalComponent>;
// after eslint --fix:
let el = <PascalComponent class="greeting">Hello world!</PascalComponent>;
 
let el = <label htmlFor="id">Hello world!</label>;
// after eslint --fix:
let el = <label for="id">Hello world!</label>;
 
let el = <label htmlFor={"id"}>Hello world!</label>;
// after eslint --fix:
let el = <label for={"id"}>Hello world!</label>;
 
let el = (
  <label many other attributes htmlFor="id">
    Hello world!
  </label>
);
// after eslint --fix:
let el = (
  <label many other attributes for="id">
    Hello world!
  </label>
);
 
let el = <PascalComponent htmlFor="id">Hello world!</PascalComponent>;
// after eslint --fix:
let el = <PascalComponent for="id">Hello world!</PascalComponent>;
 
let el = <div key={item.id} />;
// after eslint --fix:
let el = <div />;
 

Valid Examples

These snippets don't cause lint errors.

let el = <div>Hello world!</div>;

let el = <div class="greeting">Hello world!</div>;

let el = <div class={"greeting"}>Hello world!</div>;

let el = (
  <div many other attributes class="greeting">
    Hello world!
  </div>
);

let el = <label for="id">Hello world!</label>;

let el = <label for="id">Hello world!</label>;

let el = <label for={"id"}>Hello world!</label>;

let el = (
  <label many other attributes for="id">
    Hello world!
  </label>
);

let el = <PascalComponent class="greeting" for="id" />;

let el = <PascalComponent key={item.id} />;