Reputation: 283
was getting the warning message () in the below code using react.js. I checked answers on the stackoverflow and tried to remove the warning message but it didn't help.
Made a separate example with similar functionality in a static page and it is working fine. But, this code is throwing warning message. How to remove this warning message ?
<tbody>
{list.map(function(value){
return(<tr className="gradeA" role="row">
<td className="sorting_1">{ value.id }</td>
<td>{value.name}</td>
<td>{value.location}</td>
</tr>);
})
}
</tbody>
Upvotes: 0
Views: 7774
Reputation: 282030
You just need to add a unique key to the returned component from map. In your map function receive define another parameter as key and for each tr
that you return just add key={key}
as a prop.
<tbody>
{list.map(function(value, key){
return(<tr className="gradeA" role="row" key={key}>
<td className="sorting_1">{ value.id }</td>
<td>{value.name}</td>
<td>{value.location}</td>
</tr>);
})
}
</tbody>
Upvotes: 5