CODEWITHSUNDEEP
javascriptreactjsstripe-payments
Brian
Brian

Reputation: 1

integrate stripe js in react withnode

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.

  1. in tr (at cart/index.jsx:66)
  2. in Cart (at src/index.jsx:8)
  <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

Answers (1)

ttmarek
ttmarek

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

Related Questions