Reputation: 1
I want to set up a stripe checkout using react and node.js. Compiles in node terminal but when I inspect the localhost:3000 page, this error message is returned
Each child in a list should have a unique "key" prop.
Check the render method of Cart
.
<tbody>{
items.map(item => (
<tr>
<td>{item.name}</td>
<td>
<img
src={`/images/${item.apiId}.jpg`}
alt={item.name}
width={180}
/>
</td>
<td>{item.quantity}</td>
<td>{formatPrice(item.price)}</td>
</tr>)
)}
<tr>
import React from 'react'
import ReactDOM from 'react-dom'
import Cart from "./components/cart/"
ReactDOM.render(
<Cart stripeToken = "test-token" />,
document.getElementById("root")
)
Upvotes: 0
Views: 105
Reputation: 3260
Anytime you render a list of elements, you need to add a key
prop to each element so React can keep track of which elements to re-render if the component's state or props ever change. In your case, to fix that warning message you would add the key
prop with a value that is unique to each table row. For example:
<tbody>
{items.map((item) => (
<tr key={item.apiId}> // Makes the warning go away
<td>{item.name}</td>
<td>
<img
src={`/images/${item.apiId}.jpg`}
alt={item.name}
width={180}
/>
</td>
<td>{item.quantity}</td>
<td>{formatPrice(item.price)}</td>
</tr>
))}
</tbody>
In this case, I'm using the item.apiId
as the key under the assumption that the apiId
's are unique to each element in the items array. It is somewhat common to see the item's index in the array being used as a unique key, but that approach falls apart quickly if the order of the elements ever changes.
You can read more on the key prop and why it's needed here:
Upvotes: 1