React.js Tables showing key error in console

Question

I rendered a table of inventory a small business carries (stored in JSON file).

I get this error in my console: "Warning: Each child in a list should have a unique "key" prop. Check the render method of Table

My App returns Table

  <Table wines={wines}/>

My Table component:

import React from 'react'
import Row from './Row'
 
const Table = ({ wines,wine }) => {
  return (
    <div >
        <table >
            <tbody >
            {wines.map(wine =>(
                    <Row wine={wine}/>
                ))}

            </tbody>
        </table>
    </div>
  )
}

export default Table

Row component:

import React from 'react'
import Cell from './Cell'

const Row = ({ wine }) => {
  return (
   <tr>
       {Object.entries(wine).map(([key, value]) => {
           return (
               <Cell key={key} cellData={JSON.stringify(value)}/>
           )

        } ) }
   </tr>
  )
}

export default Row

Cell component:

import React from 'react'

const Cell = ({cellData,wine}) => {
  return (
    <td >
        {cellData}
    </td>
  )
}

export default Cell

The table renders fine with the data, but I cannot understand why that error above still appears in the console. I am new to React and in the learning process. Thank you.

Answer 1

In your Table component, there is a key prop missing, eg:

{wines.map(wine =>(
   <Row key={wine} wine={wine}/>
))}

It's important that the key prop is something unique to the item being iterated, as this is used to ensure the correct items are being updated, in the case where the component has to be re-rendered.