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
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 (
// ...
// ...
// ...
);
}