entonces estoy tratando de pasar el precio de valor de esta matriz
const [products, setProducts] = useState( [{ name: "14K bracelet", id: "1", description: "Beautfull 14K gold Bracelet", price: 100.00, img: braceletImg, }] )aquí
<h1 className="price">{products.price}</h1>{/*this is a prop*/}Llamo al prop aquí en el carro
function Cart({ products })código completo del componente del carrito
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;con suerte, esto le da un mejor contexto del componente
Debido a que products es una matriz , debe usar la indexación o puede procesarlos todos usando .map() .
Usando la indexación:
<h1 className="price">{products[0].price}</h1> Usando .map() :
{products.map(pr => <h1 key={pr.id} className="price">{pr.price}</h1>)} Se necesita agregar key={...} para que React pueda optimizar la representación. Si no lo agrega, React mostrará advertencias en la salida de la consola. Si los elementos ya tienen una identificación única o un valor clave, entonces es mejor usarlo.
Actualizar:
Es posible que el componente de su Cart ya se esté activando antes de que se hayan inicializado los products , esto explicaría los errores undefined .
Esto es bastante normal, y para evitar que sea un problema puedes comprobar si los products están vacíos:
function Cart({ products }) { if (!products) return "Loading..."; return ( // ... // ... // ... ); }