React-slick: Encountered two children with the same key, when infinite=true

[marcusbrose]

Warning: flattenChildren(...): Encountered two children with the same key, firstkey. Child keys must be unique; when two children share a key, only the first child will be used.

It seems like the 1st and last slide are added rendered twice.

[akiran]

checkout 0.12.2 version

[Noel-bk]

Thank you very much. You're my lifesaver!! 👍

[marcusbrose]

thanks!

[linkesch]

The same problem here even on 0.12.2:

Warning: flattenChildren(...): Encountered two children with the same key, .$cloned0. Child keys must be unique; when two children share a key, only the first child will be used.

[jamesfzhang]

@orthes I noticed this error as well. I got rid of it by removing the key attributes from the <Slider>'s children.

[psaia]

This is still an issue. @jamesfzhang's suggestion works but React throws a warning about not supplying a key which is a little annoying.

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

[dalpo]

warning.js?8a56:44 Warning: flattenChildren(...): Encountered two children with the same key, `originalundefined`. Child keys must be unique; when two children share a key, only the first child will be used.

I encountered a similar issue after the upgrade to 0.12.2 from 0.12.0.
Removing the key attribute from the Slider's children it seems to work for me, but like @petesaia said there is the React warning for not supplying the key attribute.

Any Hint?

[EDIT]

I reverted to the 0.12.0 release and it works well

[ruscoder]

I have the same problem as @dalpo when I use infinite: true option and keys for slides. (v0.12.2)

[alexanderfrey]

Same issue here.

[johuder33]

I had the same issue, but I started to deep inside the code and I got this function in track.js file

var getKey = function getKey(child, fallbackKey) {
  // key could be a zero
  return child.key === null || child.key === undefined ? fallbackKey : child.key;
};

this function define what key use when key attr is no passed, but it is, so always return child.key, so, what I did to solved the warnings for the slick and react, just add this.

var getKey = function getKey(child, fallbackKey) {
  // key could be a zero
  return child.key === null || child.key === undefined ? fallbackKey : child.key + new Date().getTime();
};

or this works as well

var getKey = function getKey(child, fallbackKey) {
  // key could be a zero
  return child.key === null || child.key === undefined ? fallbackKey : child.key + fallbackKey;
};

I hope, it is useful for you.

[Ponjimon]

Version 0.14.11
I still have this issue.

[Ponjimon]

Okay, just a heads up: I seem to "fixed" the issue. The issue was, that I used the IDs of the items directly as keys. Those IDs were numerical and whenever an item with the ID 10 appeared, it showed me that error.

Now I just prepended a string like item_${id} and it seems to work.

[Frozenix94]

Hi,
I use 0.15.4 and i have the same issue :(
I use " key={int-${slide.title_slide}} " to create my key and react warning me :
"
Each child in an array or iterator should have a unique "key" prop.
"

Can you help me ?
Thank a lot :]