Each child in an array or iterator should have a unique “key” prop

0
votes

was getting the warning message (attached image) 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>
1
javascriptreactjs

1 Answers

3
votes

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>