Duplicated Key, 'encountered two children with the same key' about react-id-swiper HOT 4 CLOSED

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 :)

from react-id-swiper.

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

from react-id-swiper.

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 :)

from react-id-swiper.

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.

from react-id-swiper.