React property name in React DOM element should be pre-defined one

• REACT_BAD_UNKNOWN_PROP
• Error
• Medium
• react

This rule applies when a wrong React property name is used for React DOM element.

In React, DOM attributes and properties are supported as camelCased names, and data-* and aria-* attributes should be lowercased. Therefore, it is possible to confuse DOM attribute name with React property name, and React will output a warning message.

It can be applied to the following:

1. DOM attribute name is used instead of React DOM property (e.g. class instead of className).
2. DOM event handler property is used instead of React event handler (e.g. onclick instead of onClick).
3. data-* and aria-* attributes are not used as lowercased names (e.g. data-X instead of data-x).

Noncompliant Code Example

import React from 'react';

export class Example1 extends React.Component {
    render() {
        return <div class="hello">Hello</div>; // REACT_BAD_UNKNOWN_PROP alarm because 'className' should be used instead of 'class'.
    }
}

export class Example2 extends React.Component {
    render() {
        return <div onclick={handleClick}>Hello</div>; // REACT_BAD_UNKNOWN_PROP alarm because 'onClick' should be used instead of 'onclick'.
    }
}

export class Example3 extends React.Component {
    render() {
        return <div data-X="3">Hello</div>; // REACT_BAD_UNKNOWN_PROP alarm because 'data-x' should be used instead of 'data-X'.
    }
}

Compliant Code Example

import React from 'react';

export class Example1 extends React.Component {
    render() {
        return <div className="hello">Hello</div>;
    }
}

export class Example2 extends React.Component {
    render() {
        return <div onClick={handleClick}>Hello</div>;
    }
}

export class Example3 extends React.Component {
    render() {
        return <div data-x="3">Hello</div>;
    }
}

Version

This rule was introduced in DeepScan 1.2.0-alpha.

See

• React DOM elements

• React Warning: Unknown DOM property class. Did you mean className?

• React Warning: Unknown event handler property onclick. Did you mean onClick?