Deprecated prop for a React DOM element should not be used

• REACT_DEPRECATED_DOM_ELEMENT_PROP
• Code Quality
• Medium
• react

This rule applies when deprecated prop for a React DOM element is used.

Deprecated props for a React DOM element and their replacements are as the following:

1. <option>: value or defaultValue props on select element should be used instead of setting selected prop.
2. <textarea>: value or defaultValue props should be used instead of setting child node.

React outputs warning messages for the above cases, and deprecated props may not work in future versions of React.

Noncompliant Code Example

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

const root = createRoot(document.getElementById('root'));
root.render(
  <>
    {/* Example 1 */}
    <select>
      <option value="hi">Hi</option>
      <option selected value="hello">Hello</option> {/* REACT_DEPRECATED_DOM_ELEMENT_PROP alarm because 'selected' prop is set on '<option>'. */}
    </select>

    {/* Example 2 */}
    <textarea>Hi</textarea> {/* REACT_DEPRECATED_DOM_ELEMENT_PROP alarm because child node is set on '<textarea>' */}
  </>
);

Compliant Code Example

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

const root = createRoot(document.getElementById('root'));
root.render(
  <>
    {/* Example 1 */}
    <select defaultValue="hello">
      <option value="hi">Hi</option>
      <option value="hello">Hello</option>
    </select>

    {/* Example 2 */}
    <textarea defaultValue="Hi" />
  </>
);

Version

This rule was introduced in DeepScan 1.6.0-beta.

See

• React DOM Components: <option>

• React DOM Components: <textarea>

• React Warning: Use the defaultValue or value props on <select> instead of setting selected on <option>.

• React Warning: Use the defaultValue or value props instead of setting children on <textarea>.