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} />).

Note: Starting from React 19, ref became a normal prop except for class components. Depending on the current React version used, the application of this rule is adjusted accordingly.

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.