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 TableRow 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 RowCell component:
import React from 'react'
const Cell = ({cellData,wine}) => {
return (
<td >
{cellData}
</td>
)
}
export default CellThe 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.
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.