react-warning-keys thrown for components not returned in an iterator

[pirate]

Do you want to request a feature or report a bug?
Bug

What is the current behavior?

<span>
    <span {...{}}>thingy</span>
    <span {...{}}>thingy</span>
</span>

Warning: Each child in an array or iterator should have a unique "key" prop. See https://fb.me/react-warning-keys for more information.
    in span

Steps to reproduce
See https://github.com/pirate/react-keys-warning

What is the expected behavior?
No key warning.

Which versions of React?
Affects: v16.0.0 (Chrome v62, macOS 10.12)
No warnings in React v15

Solutions:

• Fix the key warning
  or
• Edit the docs to explain that a key is needed on any react element with dynamic props changed on every render, not just elements returned from an iterator

[aweary]

Hey @pirate, I'm not seeing the key warning when running the example you provided here: https://jsfiddle.net/yfkuL9ky/

Are you by chance returning this as a fragment using an array? Like:

render() {
  return [
    <span>
        <span {...{}}>thingy</span>
        <span {...{}}>thingy</span>
    </span>
  ]
}

If so you need to add a key to the root span. If not, please provide a full example reproducing the warning that we can investigate. Thanks!

[pirate]

Nope, not returning in an array (it's just rendered conditionally as part of a larger component). Working on providing a full example with create-react-app, give me 30min a couple hours.

[pirate]

Here it is @aweary, this repo is the minimum amount of code required to reproduce this: https://github.com/pirate/react-keys-warning

Just open test.html to see the error.

The error disappears when babel-plugin-transform-react-inline-elements is removed, so I suspect the issue lies in the babel plugin code.
If you want, I'll close this issue and reopen it on babel's issue tracker.

[aweary]

Thanks for clarifying @pirate, you shouldn't be using the inline-elements transform in development. You should only be using applying this to your production build. Check out https://github.com/facebook/react/issues/10352 for more information. Thanks!

[frankhale]

I'm seeing this also and I am not iterating at all. I am simply trying to create table rows explicitly. I am not using arrays and I am not iterating. I cannot make this error go away even when I add keys.

Warning: Each child in an array or iterator should have a unique "key" prop.

Check the render method of `App`. See https://fb.me/react-warning-keys for more information.
    in div (at App.js:169)
    in App (at src/index.js:6)