no-unknown-property.md

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

💼 This rule is enabled in the ☑️ recommended config.

🔧 This rule is automatically fixable by the --fix CLI option.

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>, requireDataLowercase: <requireDataLowercase> }]
...

• 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.
• requireDataLowercase: optional (default: false), require data-* attributes to contain only lowercase characters. React will issue a warning when data-* attributes contain uppercase characters. In order to catch such attributes, set the requireDataLowercase option to true.

If you are using a library that passes something as a prop to JSX elements, it is recommended to add those props to the ignored properties.

For example, if you use emotion and its css prop, add the following to your .eslintrc config file:

...
"react/no-unknown-property": ['error', { ignore: ['css'] }]
...

Now, the following code passes:

var StyledDiv = <div css={{ color: 'pink' }}></div>;

When Not To Use It

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