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:

  1. textarea element: value or defaultValue props should be used instead of setting child node
  2. option element: value or defaultValue props on select element should be used instead of setting selected prop
  3. 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

// Example 1
import React from 'react';

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

// Example 2
import React from 'react';

class Hello 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>
        );
    }
}

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

var Hello = 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

// Example 1
import React from 'react';

class Hello 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} />;
    }
}

// Example 2
import React from 'react';

class Hello 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>
        );
    }
}

// Example 3
import createReactClass from 'create-react-class';

var Hello = 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.