Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Bug: Spurious warnings in react dev runtime about using "key" property in spread object #28943

Open
EricMCornelius opened this issue Apr 28, 2024 · 0 comments
Labels
Status: Unconfirmed A potential issue that we haven't yet confirmed as a bug

Comments

@EricMCornelius
Copy link

This warning: https://github.com/facebook/react/blame/190cc990e01e5131a6b26f1a3212444cebd794e2/packages/react/src/jsx/ReactJSXElement.js#L530

Is triggering any time a rest-spread operator passes a key in an array.

That means even intentional and valid situations like:

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

const component_props = [{
  key: 'my id',
  style: {
    color: 'red'
  },
  children: 'test'
}, {
  key: 'my second id',
  style: {
    color: 'green'
  },
  children: 'test2'
}];

const ComponentArray = props => component_props.map(p => <div {...p}/>);

const root = document.getElementById('root');
const vdom = createRoot(root);

vdom.render(<ComponentArray/>);

Are generating a heap of warnings when running in dev mode.

I understand the intention to try to avoid unintentional overwriting of a separate supplied key, but is the intention honestly to say you can no longer supply keys externally whatsoever?

React version: 18.2.0

Steps To Reproduce

Run the sample above.

The current behavior

Generates the following warning in development mode:

react_jsx-dev-runtime.js:92 Warning: A props object containing a "key" prop is being spread into JSX:
  let props = {key: someKey, style: ..., children: ...};
  <div {...props} />
React keys must be passed directly to JSX without using spread:
  let props = {style: ..., children: ...};
  <div key={someKey} {...props} />
    at ComponentArray

The expected behavior

No warning should be generated - there is no other JSX key property being passed that might cause a collision here.

@EricMCornelius EricMCornelius added the Status: Unconfirmed A potential issue that we haven't yet confirmed as a bug label Apr 28, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Status: Unconfirmed A potential issue that we haven't yet confirmed as a bug
Projects
None yet
Development

No branches or pull requests

1 participant