React DOM element's attribute should not have a value of the wrong type

• REACT_BAD_DOM_ATTRIBUTE_VALUE
• Error
• Medium
• react

This rule applies when React DOM element's attribute value is specified with a wrong type.

React DOM element's attribute value can be specified with several types. However, a wrong value can be set or the attribute itself can be ignored when the attribute value of a wrong type is specified. Also React outputs a warning message for it.

It can be applied to the following:

1. Non-event attribute with function value: React outputs a warning message and ignores it.
2. Non-boolean attribute with boolean value (e.g. className): React outputs a warning message and ignores it.
3. Boolean attribute with 'true' or 'false' string value: React outputs a warning message because the browser will interpret 'false' as a truthy value.
4. Attribute with Symbol value: React outputs a warning message and ignores it.
5. Attribute with NaN value: React outputs a warning message and adds the attribute with converted string 'NaN'.

Therefore, the correct type should be specified with referring to DOM Attributes in React 16.

Noncompliant Code Example

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
    <div className={false}>Hi</div>, // REACT_BAD_DOM_ATTRIBUTE_VALUE alarm because 'className' attribute is specified with boolean value.
    document.getElementById('root')
);

Compliant Code Example

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
    <div className={'header'}>Hi</div>,
    document.getElementById('root')
);

Version

This rule was introduced in DeepScan 1.7.0-beta.

See

• DOM Attributes in React 16

• React Warning: Received false for non-boolean attribute className. If this is expected, cast the value to a string. in div