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 { createRoot } from 'react-dom/client';

const root = createRoot(document.getElementById('root'));
root.render(
  <>
    <div class="hello"> {/* REACT_BAD_UNKNOWN_PROP alarm because 'className' should be used instead of 'class' */}
      Example 1
    </div>

    <div onclick={() => alert('clicked')}> {/* REACT_BAD_UNKNOWN_PROP alarm because 'onClick' should be used instead of 'onclick' */}
      Example 2
    </div>

    <div data-X="foo"> {/* REACT_BAD_UNKNOWN_PROP alarm because 'data-x' should be used instead of 'data-X'. */}
      Example 3
    </div>
  </>
);

Compliant Code Example

import { createRoot } from 'react-dom/client';

const root = createRoot(document.getElementById('root'));
root.render(
  <>
    <div className="hello">
      Example 1
    </div>

    <div onClick={() => alert('clicked')}>
      Example 2
    </div>

    <div data-x="foo">
      Example 3
    </div>
  </>
);

Version

This rule was introduced in DeepScan 1.2.0-alpha.

See

• React DOM Components

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

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

• React Warning: React does not recognize the data-X prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase data-x instead. If you accidentally passed it from a parent component, remove it from the DOM element.