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';

export 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
    }
}

Compliant Code Example

import React from 'react';

export class Hello extends React.Component {
    constructor(props) {
        super(props);
        this.state = { id: this.props.id };
    }
    render() {
        return <div>{ this.props.id }</div>;
    }
}

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.