Card component have warning message "Each child in a list should have a unique "key" prop."

[ComputerFrek]

Describe the bug

When using card component a warning appears on console "Each child in a list should have a unique "key" prop."

Ignite version

8.9.0

Additional info

System
platform darwin
arch arm64
cpu 8 cores Apple M2
directory SnapnShare /Users/computerfrek/SourceCodes/SnapnShare

JavaScript (and globally-installed packages)
node 20.7.0 /opt/homebrew/bin/node
npm 10.1.0 /opt/homebrew/bin/npm
npm 10.1.0
yarn 1.22.19 /opt/homebrew/bin/yarn
pnpm - not installed
expo 48.0.20 managed

Ignite
ignite-cli 8.9.0 /Users/computerfrek/.npm/_npx/e31027f3785124a8/node_modules/.bin/ignite
ignite src build /Users/computerfrek/.npm/_npx/e31027f3785124a8/node_modules/ignite-cli/build

Android
java 11.0.20.1 /usr/bin/java
android home - /Users/computerfrek/Library/Android/sdk

iOS
xcode 15.0
cocoapods 1.12.1 /opt/homebrew/bin/pod

Tools
git git version 2.42.0 /opt/homebrew/bin/git

[cuetrigg]

Hi @ComputerFrek please provide a snippet of how you are using the Card Component?

[ComputerFrek]

let foodbody = id + ' - ' + FoodName; let foodfooter = FoodLocation._latitude + ' - ' + FoodLocation._longitude; return <Card content={foodbody} footer={foodfooter} />;

[cuetrigg]

@ComputerFrek I am sill note sure by the snippet you provided that you are using an underlying loop of some sort, but you can attempt to add the key prop to your card component like this: <Card key={id} content={foodbody} footer={foodfooter} />;, but for it to work the id needs to be unique.

For a more in depth guide you can go and read here

[ComputerFrek]

Hi, yes. It was .map to list the items.
I knew that a key was needed but when referenced the Components-Card docs I didn't see the option for a key. So I thought that it was not in.

Thanks for the help!

[frankcalise]

@ComputerFrek you can always provide a key prop to a component :) Glad you got it working