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 replacement are as the following:

textarea element: value or defaultValue props should be used instead of setting child node.
option element: value or defaultValue props on select element should be used instead of setting selected prop.
input element: value with onChange prop should be used instead of setting deprecated checkedLink prop.

React outputs a warning message for all above cases, and deprecated props may not work in a future version of React.

-Noncompliant Code Example
+Compliant Code Example
 import React from 'react';
 export class Example1 extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { value: 'Hi' };
+    this.handleChange = this.handleChange.bind(this);
+  }
+  handleChange(e) {
+    this.setState({ value: e.target.value });
+  }
   render() {
-    return <textarea>Hi</textarea>; // REACT_DEPRECATED_DOM_ELEMENT_PROP alarm because child node is set on 'textarea' element.
+    return <textarea value={this.state.value} onChange={this.handleChange} />;
   }
 }
 export class Example2 extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { value: 'hello' };
+    this.handleChange = this.handleChange.bind(this);
+  }
+  handleChange(e) {
+    this.setState({ value: e.target.value });
+  }
   render() {
     return (
-      <select>
+      <select value={this.state.value} onChange={this.handleChange}>
         <option value="hi">Hi</option>
-        <option selected value="hello">Hello</option> {/* REACT_DEPRECATED_DOM_ELEMENT_PROP alarm because 'selected' prop is set on 'option' element. */}
+        <option value="hello">Hello</option>
       </select>
     );
   }
 }
 import createReactClass from 'create-react-class';
-import LinkedStateMixin from 'react-addons-linked-state-mixin';
 export const Example3 = createReactClass({
-  mixins: [LinkedStateMixin],
   getInitialState: function () {
     return { check: false };
   },
+  handleChange: function (e) {
+    this.setState({ check: e.target.value });
+  },
   render: function () {
-    return <input type="checkbox" checkedLink={this.linkState('check')} />; // REACT_DEPRECATED_DOM_ELEMENT_PROP alarm because 'checkedLink' prop is set on 'input' element.
+    return <input type="checkbox" value={this.state.check} defaultChecked={this.state.check} onChange={this.handleChange} />;
   }
 });

Noncompliant Code Example

View with compliant examples side by side

import React from 'react';

export class Example1 extends React.Component {
  render() {
    return <textarea>Hi</textarea>; // REACT_DEPRECATED_DOM_ELEMENT_PROP alarm because child node is set on 'textarea' element.
  }
}

export class Example2 extends React.Component {
  render() {
    return (
      <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' element. */}
      </select>
    );
  }
}

import createReactClass from 'create-react-class';
import LinkedStateMixin from 'react-addons-linked-state-mixin';

export const Example3 = createReactClass({
  mixins: [LinkedStateMixin],
  getInitialState: function () {
    return { check: false };
  },
  render: function () {
    return <input type="checkbox" checkedLink={this.linkState('check')} />; // REACT_DEPRECATED_DOM_ELEMENT_PROP alarm because 'checkedLink' prop is set on 'input' element.
  }
});

Compliant Code Example

View with noncompliant examples side by side

import React from 'react';

export class Example1 extends React.Component {
  constructor(props) {
    super(props);
    this.state = { value: 'Hi' };
    this.handleChange = this.handleChange.bind(this);
  }
  handleChange(e) {
    this.setState({ value: e.target.value });
  }
  render() {
    return <textarea value={this.state.value} onChange={this.handleChange} />;
  }
}

export class Example2 extends React.Component {
  constructor(props) {
    super(props);
    this.state = { value: 'hello' };
    this.handleChange = this.handleChange.bind(this);
  }
  handleChange(e) {
    this.setState({ value: e.target.value });
  }
  render() {
    return (
      <select value={this.state.value} onChange={this.handleChange}>
        <option value="hi">Hi</option>
        <option value="hello">Hello</option>
      </select>
    );
  }
}

import createReactClass from 'create-react-class';

export const Example3 = createReactClass({
  getInitialState: function () {
    return { check: false };
  },
  handleChange: function (e) {
    this.setState({ check: e.target.value });
  },
  render: function () {
    return <input type="checkbox" value={this.state.check} defaultChecked={this.state.check} onChange={this.handleChange} />;
  }
});

Version

This rule was introduced in DeepScan 1.6.0-beta.

See

Forms
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>.
React Warning: checkedLink prop on input is deprecated; set value and onChange instead.

Deprecated prop for a React DOM element should not be used

Noncompliant Code Example

Compliant Code Example

Version

See

Was this documentation helpful?