0

Newbie here - completing a React portfolio for my Bootcamp homework. I have read other similar answers and have tried implementing suggestions but I am still getting this warning message "child in a list should have a unique "key" prop. Check the render method of ProjectCard. "

Here is my code - I would appreciate any feedback or ideas on how to fix this. Many thanks

import React from "react";
import Card from "react-bootstrap/Card";
// import Row from "react-bootstrap/Card";
// import Col from "react-bootstrap/Card";
import projects from "../../projects.json";

function ProjectCard(props) {
  return (
   
    <div>
   
      {projects.map((props,key) => (
        <Card style={{ width: '25rem' }}>
        <Card.Body key={key}>
          <Card.Title>{props.name}</Card.Title> 
          <Card.Img variant="top" src={props.image} img alt={props.name} />
          <Card.Text>
           {props.text}
          </Card.Text>
          <Card.Link href={props.deployedLink}>Deployed Site</Card.Link> 
          <Card.Link href={props.githubRepo}>Github Repo</Card.Link> 
        </Card.Body>
        </Card>
      ))}
    
    </div>
 
    
  );
}

export default ProjectCard;
Lissa Simpson
  • 3
  • 2
  • Since the Card.Body is in the Card component, have you tried setting the key to the Card component? My guess is that the key should be on the first container. – VelizarStavrev Mar 06 '23 at 20:23

0 Answers0