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

Question

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

Answer 1

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>
    );
  })
}