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.