Object spreads with nested children gives unwanted key error.

[joeywisse]

I believe the following case should not result with a key error. So I would like to know if this is correct behaviour or a bug.

I have produced the following case

Render a component which spreads attributes on it's top element, with children.
The children are nested and at least one child has an object spread.

This situation produces the following key error

Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of Component. It was passed a child from { some parent component }. See https://fb.me/react-warning-keys for more information.

Reproduction

I've added the most basic code to reproduce the issue in a JSFiddle. However, I don't see the key error being displayed on JSFiddle.

1. We have our component which renders it's children and spreads attributes on the top element.
2. We render Component with nested children. Of which at least one has an object spread.

function Component({ children }) {
  return (
    <div {...{}}>
      {children}
    </div >
  );
};

function App() {
  return (
    <Component>
      <p {...{}} />
      <p>Foo</p>
    </Component>
  );
};

Variations:

• When the first nested child given to Component is a component, and the Component receives an object spread, the key warning is also being thrown.
• When the object spread is removed from
  inside Component the key warning is not thrown.
• When the object spread is remove from the first nested child

  given to Component the key warning is not thrown.

Expectation
I would not expect key errors because there are no arrays of children being rendered.

Background
Build with react@15.6.1 and react-dom@15.6.1

I've started getting this problem since I started using airbnb/react-with-styles with aphrodite for styling. It generates objects with possibly both style and className properties which can be spread on to JSX elements. However, the issue persists when react-with-styles is not used. The behaviour seems to come from react.

Is this correct behaviour?

[aweary]

Hey @bonjowi!

I've added the most basic code to reproduce the issue in a JSFiddle. However, I don't see the key error being displayed on JSFiddle.

Unfortunately, it's hard to help if we can't reproduce the issue. If it's not occurring in the JSFiddle that means there's likely some other reason the key warning is being triggered. It sounds like Component is being passed an array of elements as a child.

Could you try to write up a minimal example reproducing the issue that we could look at?

[joeywisse]

@aweary Thanks for your time. Adding the same case in a create-react-app project does not cause the same error. So it's presumably something else than react causing this problem. I'm currently trying to figure out what's wrong. I'll get in touch after I have found the problem.

[gaearon]

Wild guess: maybe you have a production-only transform like inline-elements or constant-elements (or a preset including them) accidentally enabled in development.

[joeywisse]

Thanks @gaearon

I can confirm that babel-plugin-transform-inline-elements is causing the problem.

I started stripping my webpack configs etc. and found out what's causing the problem.
I've also reproduced the issue in create-react-app after ejecting and adding a custom .babelrc containing only preset-react and the plugin transform-react-inline-elements.

If you're interested I can upload a repository to reproduce the issue. But any way, this is not an issue for this repository. My mistake.

Thanks for the help!

[gaearon]

This is expected. The Babel doc page for both plugins says they're going to cause confusing warnings if used in development.