React-id-swiper: Duplicated Key, 'encountered two children with the same key'

[sergiokopplin]

Hey, hello and thanks for this awesome work.

We have a production application using your lib, and we're having some problems.
In development, or even in production, we get this errors:

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

The swiper is getting this '58283' from the key that i'm giving to my components, so both swiper and my components are rendering a same key.

I was trying to fix that on my own code, no success.
I was looking the source of react-id-swiper, and i might have fixed that:

return React.cloneElement(e, { key: Date.now() + index, className: [self.props.slideClass, e.props.className, noSwipingClass].join(' ') });

If i add this line to the code, the components are rendered with different keys, so the problem solves! :)

Can we add that (or something similar) on the code?
Should I add a PR?

Thanks!

cc @renatogalvones.

[kidjp85]

Hi @sergiokopplin , can u show me ur code for swiper. I wanna see how u render you children component :) . And thanks for your suggestion too. I will be great if u can make a PR for this :)

[renatogalvones]

Hello @kidjp85 !

Thanks for making this awesome "proxy". Saved a lot of hard work here. =]

Here's how our code is implemented:

function CardSlider({ params, slides, Swiper, updateSliderDimensions }) {
  if (slides.length <= 0 || !Swiper) return false;

  slides.forEach((item) => {
    const cardReview = (
      <CardReview
        {...item}
        key={item.id}
        updateSliderDimensions={updateSliderDimensions}
      />
    );

    sliderItems.push(<div key={item.id}>{cardReview}</div>);
  });

  return (
    <Swiper {...params}>
      { sliderItems }
    </Swiper>
  );
}

This code is part of our "dumb" component which is responsible for only the rendering part.
We are requiring the Swiper on the componentWillMount on the "smart" component and passing it by props to the "dumb" one.

And as the React documentation suggests we are using the same id on the div and the CardReview.

[kidjp85]

Hi @renatogalvones , I could see where is the problem here . But I still don't know why u guys need to use same key for both wrapper div and CardReview. What is the benefit of using the same key for <div key='item.id'><CardReview key='item.id'.... /></div> ? It will be very helpful, if u guys can put a reference link for this :)

I always use key only for root element in loop like

function CardSlider({ params, slides, Swiper, updateSliderDimensions }) {
  if (slides.length <= 0 || !Swiper) return false;

  const renderItem = item => {
    return (
      <div key={item.id}>
        <CardReview {...item} updateSliderDimensions={updateSliderDimensions} />
      </div>
    )
  }

  return (
    <Swiper {...params}>
      { slides.map(renderItem) }
    </Swiper>
  );
}

Thanks :)

[sergiokopplin]

@kidjp85 actually, we don't have to use. Your solution is better.