React special props should not be accessed

  • REACT_BAD_SPECIAL_PROPS
  • Error
  • Medium
  • react

This rule applies when React special props are accessed.

React uses two special props (ref and key). Accessing these props from a component (this.props.ref and this.props.key) results in undefined value.

If you need to access the same value of the special prop, you should pass it as a different prop (e.g. <ListItemWrapper key={result.id} id={result.id} />).

Noncompliant Code Example

import React from 'react';

class Hello extends React.Component {
    constructor(props) {
        super(props);
        this.state = { key: this.props.key }; // REACT_BAD_SPECIAL_PROPS alarm
    }
    render() {
        return <div>{ this.props.key }</div>; // REACT_BAD_SPECIAL_PROPS alarm
    }
}
ReactDOM.render(<Hello key="hello" />, document.getElementById("root"));

Compliant Code Example

import React from 'react';

class Hello extends React.Component {
    constructor(props) {
        super(props);
        this.state = { id: this.props.id };
    }
    render() {
        return <div>{ this.props.id }</div>;
    }
}
ReactDOM.render(<Hello key="hello" id="hello" />, document.getElementById("root"));

Version

This rule was introduced in DeepScan 1.6.0-beta.

See

  • Special Props Warning

  • React Warning: key is not a prop. Trying to access it will result in undefined being returned. If you need to access the same value within the child component, you should pass it as a different prop.