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>;

Examples of correct code for this rule:

var React = require('react');

var Hello = <div className="hello">Hello World</div>;

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


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

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.