integrate stripe js in react withnode

Question

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.

in tr (at cart/index.jsx:66)
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")
)

ttmarek · Accepted Answer · 2020-08-15 19:04:34Z

1

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:

answered Aug 15, 2020 at 19:04

ttmarek

3,2901 gold badge19 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Brian Over a year ago

That did the trick and the warning is gone, but now it says : v3:1 Uncaught IntegrationError: Invalid stripe.redirectToCheckout parameter:

ttmarek Over a year ago

Glad to hear the first issue is fixed! I would recommend opening up a second question for the new error as it doesn't seem related.

Collectives™ on Stack Overflow

integrate stripe js in react withnode

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related