no-unknown-property.md

Disallow usage of unknown DOM property (react/no-unknown-property)

💼 This rule is enabled in the following configs: all, recommended.

🔧 This rule is automatically fixable using the --fix flag on the command line.

In JSX most DOM properties and attributes should be camelCased to be consistent with standard JavaScript style. This can be a possible source of error if you are used to writing plain HTML. Only data-* and aria-* attributes are usings hyphens and lowercase letters in JSX.

Rule Details

Examples of incorrect code for this rule:

var React = require('react');

var Hello = <div class="hello">Hello World</div>;
var Alphabet = <div abc="something">Alphabet</div>;

// Invalid aria-* attribute
var IconButton = <div aria-foo="bar" />;

Examples of correct code for this rule:

var React = require('react');

var Hello = <div className="hello">Hello World</div>;
var Button = <button disabled>Cannot click me</button>;
var Img = <img src={catImage} alt="A cat sleeping on a keyboard" />;

// aria-* attributes
var IconButton = <button aria-label="Close" onClick={this.close}>{closeIcon}</button>;

// data-* attributes
var Data = <div data-index={12}>Some data</div>;

// React components are ignored
var MyComponent = <App class="foo-bar"/>;
var AnotherComponent = <Foo.bar for="bar" />;

// Custom web components are ignored
var MyElem = <div class="foo" is="my-elem"></div>;
var AtomPanel = <atom-panel class="foo"></atom-panel>;

Rule Options

...
"react/no-unknown-property": [<enabled>, { ignore: <ignore> }]
...

• enabled: for enabling the rule. 0=off, 1=warn, 2=error. Defaults to 0.
• ignore: optional array of property and attribute names to ignore during validation.

When Not To Use It

If you are not using JSX you can disable this rule.