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>
+           </select>
         );
     }
 }
 import createReactClass from 'create-react-class';
-import LinkedStateMixin from 'react-addons-linked-state-mixin';
 export var 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 var 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 var 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?