React-slick: Encountered two children with the same key warning

[chrischen]

Encountered two children with the same key, .$.$1. Child keys must be unique; when two children share a key, only the first child will be used.

It keeps showing this error when mounted and also when changing slides. React 15.0.1, Chrome 50.0.2661.94.

[akiran]

Can you give me code snippet to replicate this issue

[chrischen]

` render() {
let settings = {
dots: false,
infinite: true,
slidesToShow: 1,
slidesToScroll: 1
};

// const childElements = this.renderResults();
// const childElements = (<div>Test1</div><div>test2</div>);

  return (
    <Slider {...settings}>
    <div key="a1"><h3>1</h3></div>
    <div key="a2"><h3>2</h3></div>
  </Slider>
  );

}`

Here is the picture of the "slick-track" div that shows 4 child components (2 with duplicate keys).

I should also note the warning changed since I changed the name of the keys:

Encountered two children with the same key, .$.$a2. Child keys must be unique; when two children share a key, only the first child will be used.warning
Encountered two children with the same key, .$.$a1. Child keys must be unique; when two children share a key, only the first child will be used.

The error does not show up and no duplicate child components are made if there is only 1 slide.

[emartini]

I have the same issue in a project I've started today, the strange thing is I've just copied the code from another working project. The only difference I can notice between both projects is on installed dependencies inside the react-slick node_modules directory, In one the slick-carrousel version points to 1.5.9 and the other to 1.6.0, which was released last friday. According to the current package.json, the version should not be greater than 1.6.0

[liesislukas]

i have same issue with v0.12.1 downgrading to 0.12.0 solves the problem.

package.json:

"react-slick": "0.12.0",

[akiran]

I will fix it today

[corbanbrook]

Getting the same problem, It looks to me like the duplicate key warnings might be from the extra slides that get created to do the infinite looping.

[akiran]

checkout 0.12.2 version

[dsteinbach]

I still see this issue in 0.12.2 :(

[jsiebern]

Same here :(

[creeperyang]

Yeah, still get the warning with [email protected].

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

[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.

[smilingpoplar]

@akiran Still get the warning with [email protected].

[akiran]

@smilingpoplar Can you replicate the issue in jsfiddle and post it hear

[smilingpoplar]

@akiran Sorry, I don't know how to setup a react-slick example in fiddle. I've just used @johuder33 ‘s quick patch to work around this issue.

[liesislukas]

why issues is closed if people are still experiencing this issue?

[akiran]

More discussion is going on here https://github.com/akiran/react-slick/pull/362

[akiran]

This issue is fixed in 0.12.3

[sugandhhgoyal]

I am getting the same error how do i correct this.
My table.js file-
render() { return ( <div className="table" > <div className="container" > <div className="show-grid row"> <div className="col-xs-3 head1">Products</div> <div className="col-xs-3 head2">Variants</div> <div className="col-xs-3 head3">PSID</div> <div className="col-xs-3 head4">Updated</div> </div> {this.props.dataProp.map((data => { return (<Category key={data.categoryName + 'abc'} categoryData={data}/>); })) } </div> </div> ) }

My category.js file -
render() { return ( <div className="show-grid row category-row" key={this.props.categoryData.brandCategoryId + '123'}> <div className="col-md-8 text-left category" key={this.props.categoryData.categoryName + 'abcd'} > <b>{this.props.categoryData.categoryName}</b> </div> {this.props.categoryData.productList.length > 0 && <div className="col-md-4 text-right"> <button className="edit" onClick={() => this.edit(this.props.categoryData.productList[0].brandProductSkuList)}> {this.state.text}</button> </div> } {this.renderParent.bind(this)()} </div> ) } }

ERROR--->
flattenChildren(...): Encountered two children with the same key,2:$King Combo. Child keys must be unique; when two children share a key, only the first child will be used. in div (at Category.js:83) in Category (created by Connect(Category)) in Connect(Category) (at Table.js:25)

flattenChildren(...): Encountered two children with the same key,1:$Make it a Combo - Mutton Whopperabc. Child keys must be unique; when two children share a key, only the first child will be used. in div (at Table.js:17) in div (at Table.js:16) in DisplayTable (at map.js:90)

[mikeselander]

I can confirm that I also get this issue, although only when using the lazy loading flag.

[reft]

This does not seem to be solved? I get this issue when using lazy loading, (same as @mikeselander)

[houkanshan]

Hey @reft @mikeselander are you also using row ? I reproduced it and post a new issue here https://github.com/akiran/react-slick/issues/1422

[saiyapen]

I got this warning, and I don't know where it from. Anyone help me, please?

[TaekwanMin]

having simillar issue when rendering multiple 2x2 slides in a page.