0

I have a small array of data in a separate file.

Each item of the array has an id of a unique number.

In another file I declared props for the component that I want to rendex and the overall "design" of it with (<p>{props.title) and a few more. I tried adding {props.id} and even changing it to {props.key} but it's not helping in that file.

Next I'm rendering the data in another file with const cards = shopdata.map(item => {

one of the props is

key={item.id}
title={item.title}

but when I inspect the page in my browser it's giving me the

Each child in a list should have a unique "key" prop.

error.

Does anyone know how to fix this problem? I tried adding {props.key} or {props.id} in both the file that I'm rendernig into, and the props template. I tried changing the name from id to key, number in the data file and then adding it to the props/props template files but it's refusing to accept it.

Any help would be GREATLY appreciated as I don't want to go on without it, because I plan to use the ID/key for a shop as a reference to adding/deleting items later on.

Improve this question
1
  • Do your items have ids?? Commented Mar 5, 2022 at 18:43

1 Answer 1

Reset to default
-1

Keys should be unique. Check if item.id is undefined or null

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments