Question 252582 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Each child in a list should have a unique "key" prop. how to fix this

function App() { return (
    <StrictMode>
     {data.map(creatcard) }
 </StrictMode>

  )
}
function creatcard(characters){
 return(
   <Card 
      id={characters._id}
         name={characters.name}
         about={characters.about}
         img={characters.img}
         ></Card>
)}

here is my card component

function Card(pops){ return (
        <div  className="cards" key={pops.id}>
            <div className="subhead">
            <h1 >{pops.name}</h1>
         </div>
        <p>{abt.substring(0,200)}
       <br></br> <Link to={`/${pops.name}`}>Read more...</Link></p>
        <img id="dp" src={pops.img}></img>
</div>    
)}

i don’t know how to solve this problem . i’ve already set key for each card in my card component

Tags:

2

Answers


  1. 0

    The key should be in the direct Component render of a map function. And your key must not have duplicates. If your IDs might have some duplicates, you can easily concat with an index to solve the warning.

    function App() { return (
   <StrictMode>
    {data.map(creatcard) }
   </StrictMode>
 )
}

function creatcard(characters, index){
return(
  <Card 
     key={character._id} // or key={character._id + '' + index}
     id={characters._id}
     name={characters.name}
     about={characters.about}
     img={characters.img}
  />
)}
    Login or Signup to reply.
  2. 0

    The key prop that react is asking for should be applied as a prop on your <Card/> component usage and not inside the Card component. Here’s what I mean;

       function App() { 
     return (
        <StrictMode>
         {data.map(creatcard)}
        </StrictMode>
      )
    }

function creatcard(characters){
 return(
   <Card 
      key={characters._id}
      id={characters._id}
      name={characters.name}
      about={characters.about}
      img={characters.img}
    ></Card>
)};

    React uses the key prop in list rendering to identify each list items uniquely. React needs this key to efficiently update the UI when items are added, updated or removed from the list. Hope this helps.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search