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

// Example 1
React.createClass({
    render() {
        return <div class="hello">Hello</div>; // REACT_BAD_UNKNOWN_PROP alarm
    }
});

// Example 2
function handleClick() {}

React.createClass({
    render() {
        return <div onclick={handleClick}>Hello</div>; // REACT_BAD_UNKNOWN_PROP alarm
    }
});

// Example 3
React.createClass({
    render() {
        return <div data-X="3">Hello</div>; // REACT_BAD_UNKNOWN_PROP alarm
    }
});

Compliant Code Example

// Example 1
React.createClass({
    render() {
        return <div className="hello">Hello</div>;
    }
});

// Example 2
function handleClick() {}

React.createClass({
    render() {
        return <div onClick={handleClick}>Hello</div>;
    }
});

// Example 3
React.createClass({
    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?