So im trying to grab the products price in one of my files. I have a .map in my file

{cart.map((products) =>(
                
                
            <Card key={products.id} className="card-cart">{/*make it so this wraps around the whole project */}
                {/* {totalPrice = products.reduce((acc, currentValue) => {
                    return acc + currentValue
                }, 0)} */}

                {/* {console.log(totalPrice)} */}

                {/*
                const totalPrice = products.reduce((acc, currentValue) => {//you have to grab the product price and use the reduce to cycle through the array 
        return acc + currentValue
    }, 0)
    console.log(totalPrice)
                */}

                {console.log(products.price)}
                

                <Card.Body>
                    <Card.Title>{products.name}</Card.Title>
                    <Card.Text>{products.description}</Card.Text>
                    <Card.Footer>{"$" + products.price}</Card.Footer>
                    <Button className="btn btn-primary btn-add" onClick={() => incrementProduct(products.id)}>+</Button>
                    <Button className="btn btn-primary btn-minus" onClick={() => decrimentProduct(products.id)}>-</Button>
                    <h1 className="card-items-quantity">Items: </h1>
                </Card.Body>
                </Card>))}

and when ever i grab the products price in the map it works, but whenever i move outside of it. It says its undefined

const {products, setProduct} = useContext(productContext)
    // console.log("your product price is " + products.price)

    console.log("your product price is " + products.price)```