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, if an invalid type is used, an unintended value can be set or the attribute itself can be ignored. 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".

Noncompliant Code Example

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

const root = createRoot(document.getElementById('root'));
root.render(
  <>
    <div className={false}>Hi</div> {/* REACT_BAD_DOM_ATTRIBUTE_VALUE alarm because 'className' is specified with a boolean. */}
    <input disabled="false" /> {/* REACT_BAD_DOM_ATTRIBUTE_VALUE alarm because 'disabled' is specified with a string. */}
  </>
);

Compliant Code Example

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

const root = createRoot(document.getElementById('root'));
root.render(
  <>
    <div className="false">Hi</div>
    <input disabled={false} />
  </>
);

Version

This rule was introduced in DeepScan 1.7.0-beta.

See

• React DOM Components

• React Warning: Received false for a non-boolean attribute className. If you want to write it to the DOM, pass a string instead: className="false" or className={value.toString()}. If you used to conditionally omit it with className={condition && value}, pass className={condition ? value : undefined} instead.

• React Warning: Received the string false for the boolean attribute disabled. The browser will interpret it as a truthy value. Did you mean disabled={false}?