0

I'm fairly new to react-native. I encountered a problem with dynamic rendering of components.

I'm using a swiper component. When there is only one card to be rendered i get a warning:

"Warning: Encountered two children with the same key, 0. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version."

Everything works fine when there is more than one card to be rendered but when there is only one card to be rendered I get the warning.

I read this : Understanding unique keys for array children in React.js

But its not really making sense to me :(

I also posted my question here :

https://github.com/alexbrillant/react-native-deck-swiper/issues/90

Any help would be appreciated!

Thanks

Edit: added code.

Screenshots of my code is in the links above but I think the most relevant code would be :

cards.push(<MyPetCard
petId={responseJson[x].petId}
petName={responseJson[x].name}
breed={responseJson[x].breed}
gender={responseJson[x].gender}
category={responseJson[x].category}
description={responseJson[x].description}
birthday={responseJson[x].birthday}
imageInfo={image}
petAge={responseJson[x].age}
distance={petDistance}
significantValue={responseJson[x].significant}
/>);

render method looks like this

Jezreel Ravina
  • 51
  • 5
  • Hi ! When you create a new component with a key by exemple Hello World in the same view you can't use the same key={2} you have to change the number, replace 2 by 3 by exemple. But can you show your code ? – Eliott Robert Dec 06 '17 at 08:46
  • @EliottRobert Thanks for respoding :) added the code. – Jezreel Ravina Dec 06 '17 at 08:55
  • Are you sure your problem is here ? how you display cards ?? – Eliott Robert Dec 06 '17 at 09:38
  • @EliottRobert I'm not entirely sure. I think it may have to do with the component react-native-deck-swiper. Is there a way to trace / debug the keys of my components? – Jezreel Ravina Dec 06 '17 at 10:49
  • habitually this error spawn when you display a array. By exemple when you do : array.map((item, index) => {{hello World}) for patch you need to add key={index} in (Hello World. And yes you can debug. Search in node_modles/react-native-deck-swiper and try to find your problem. – Eliott Robert Dec 06 '17 at 12:20
  • Thanks for your tip @EliottRobert I was able to find the culprit behind this. It was indeed a problem with the component i used: react-native-deck-swiper. – Jezreel Ravina Dec 07 '17 at 02:39

1 Answers1

0

FYI, My problem was specifically with react-native-deck-swiper I was encountering a warning if the cards array passed to the swiper contained only one element.

Seems the swiper component was preparing the next card to be rendered but since the cards only had one item, the component keys were duplicated.

I also posted the answer here:

https://github.com/alexbrillant/react-native-deck-swiper/issues/90

hope it helps!

Jezreel Ravina
  • 51
  • 5