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 (key and ref). If you access these props by yourself inside a component (e.g. props.key), undefined is read.

If you need to access the same value as 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 { createRoot } from 'react-dom/client';

function Hello({ key }) {
  return (
    <div>Hello { key } </div>
  );
}

const root = createRoot(document.getElementById('root'));
root.render(<Hello key="foo" />);

Compliant Code Example

import { createRoot } from 'react-dom/client';

function Hello({ id }) {
  return (
    <div>Hello { id } </div>
  );
}

const root = createRoot(document.getElementById('root'));
root.render(<Hello id="foo" />);

Version

This rule was introduced in DeepScan 1.6.0-beta.

See

• Special Props Warning

• React Warning: Hello: 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. (https://react.dev/link/special-props)