2

I created a react component and passing props to it. But when the control is rendered, I do not see the prop and its value. Due to this I am getting error.

This is how I am calling the component, passing key2 as a prop:

 return <Card className="card" key2={uuidv4()}>{items}</Card>;

This is how the component looks:

import "./Card.css";
function Card(props) {
  const classes = "card " + props.className;
console.log("key:" + props.key2)
  return (
    <div key={props.key2} className={classes}>
      {props.children}
    </div>
  );
}

export default Card;

This is how the div was rednderd

<div class="card card"></div>

Expected:

<div class="card card" key="6bbf4919-3e38-40f0-8687-910feffcf3f6"></div>

See below screenshot for more info:

enter image description here

OpenStack
  • 5,048
  • 9
  • 34
  • 69
  • Have deleted my answer but it turns out OP is just trying to solve an _"Each child in a list should have a unique "key" prop."_ error. Probably in whatever they're passing to `` as `children` – Phil Dec 01 '22 at 02:23

0 Answers0