how to pass values from an array into a prop

Question

so im trying to pass the value price from this array

const [products, setProducts] = useState(
    [{
      name: "14K bracelet",
      id: "1",
      description: "Beautfull 14K gold Bracelet",
      price: 100.00,
      img: braceletImg,
    }]
  )

into here

<h1 className="price">{products.price}</h1>{/*this is a prop*/}

I call the prop here in cart

function Cart({ products })

full code of the cart component

function Cart({ products }) {
  return(
    <div className="Body">
            {/* {products.map(pr => <h1 className="price">{pr.price}</h1>)} */}
        <div className="Cart-wrapper" >
        <div className="cart-header">
            <h5 className="Product-name cart-text">Product</h5>
            <h5 className="quantity-name cart-text">Quantity</h5>
            <h5 className="price-name cart-text">Price</h5>
            <Button className="btn btn-plus">+</Button>
            <Button className="btn btn-minus">-</Button>
            <div className="card-cart">
                <img className="braceletimg" src={braceletImg} />
                <h1 className="card-body-title">Bracelet title</h1>
                <h1 className="card-body-title seemore"><Link className="Link" to="/Bracelets">Learn More</Link></h1>
                <hr className="cart-hr"></hr>
            </div>
            <div className="div-price">
            {products.map(pr => <h1 key={pr.id} className="price">{pr.price}</h1>)}
            <small className="shippingprice">$5.00 + shipping</small>            
            </div>
                <Button className="btn btn-cart  btn-primary"><Link className="Link" to="/Cart/shipping-buynow">Review Cart</Link></Button>
            </div>
        </div>
    </div>
  )
}

export default Cart;

hopefully, this gives you a better context of the component

Answer 1

Because products is an array , you either need to use indexing, or you can process them all using .map() .

Using indexing:

<h1 className="price">{products[0].price}</h1>

Using .map() :

{products.map(pr => <h1 key={pr.id} className="price">{pr.price}</h1>)}

The addition of key={...} is needed so React can optimize the rendering. If you don't add it then React will show warnings in the console output. If the items already have a unique id or key value, then it's best to use that.

Update:

Your Cart component may be getting activated already before products has been initialized, this would explain the undefined errors.

This is quite normal, and to prevent it from being a problem you can check if products is empty:

function Cart({ products }) {
  if (!products)
      return "Loading...";

  return (
    // ...
    // ...
    // ...
  );
}