i am getting error Each child in a list should have a unique "key" prop

user_14688138 0
Viewed 68

i am using react and when i tried to use map function in it ,i had multiple components inside map return function.so inorder to contain i used dummy parent element and started showing the error ** Each child in a list should have a unique "key" prop** .i don't know how to include key in the dummy parent <>.will you help me out.

                           {
                             dataArray.map((item,key)=>{
                                return(
                                     <>

                                    <td key={key}>{item.country}</td>
                                     <td key={key}>{item.city}</td>
                                    </> 
                                )})
                            }

By adding the dummy parent i am getting that error unique key.is there any way i can remove the unique key error keeping both td in the return statement

react-redux react-hooks reactjs javascript
1 Answers

Add a key to the fragment, not to the individual <td>s:

{
  dataArray.map((item, key) => {
    return (
      <React.Fragment key={key}>
        <td>{item.country}</td>
        <td>{item.city}</td>
      </React.Fragment>
    );
  })
}
user_95152070
Related