I have the below code:

import { Card, CardGroup } from "react-bootstrap";

function Woodcutting() {
  const trees = [
    {
      uID: "tree-normal",
      name: "Normal Tree",
      level: 1,
      interval: 3000,
      xp: 10,
      media: "tree.png",
    },
    {
      uid: "tree-oak",
      name: "Oak Tree",
      level: 5,
      interval: 4000,
      xp: 15,
      media: "tree.png",
    },
    {
      uID: "tree-magic",
      name: "Magic Tree",
      level: 10,
      interval: 5000,
      xp: 20,
      media: "tree.png",
    },
  ];

  function onCardClick(event) {
    console.log(event.target.value);
  }

  return (
    <CardGroup>
      {trees.map((tree) => (
        <Card
          style={{ width: "18rem" }}
          onClick={onCardClick}
          key={tree.uID}
          value={tree.uID}
          style={{ cursor: "pointer" }}
        >
          {/* <Card.Img variant="top" src="tree.png" /> */}
          <Card.Body>{tree.name}</Card.Body>
        </Card>
      ))}
    </CardGroup>
  );
}

export default Woodcutting;

I'm a little confused on a couple of things.

First, even though I've set the "key" prop on I'm still getting a warning in the console saying "Each child in a list should have a unique "key" prop."

Second, even though I've set the "value" prop, when I log to the console on each click I get "undefined". Is anybody able to help?

CodePudding user response：

1)second object's key "uID" is mistyped that's causing key issue

2)Card might not have a value prop. and it is not a form element

Replace your onClick with:

onClick={()=>onCardClick(tree.uID)}

and

 function onCardClick(uID) {
    console.log(uID);
  }