Getting error when adding a function to my react app - reactjs

Question

I'm new to react and followed a tutorial to do a shopping cart. In the end, I added a function that would give me the total cost of the products, but I get an error when adding products and clicking on Cart "productList.reduce is not a function". You can see this function (getTotalCost) in Cart. I tried to solve this but I get other errors. These are my files:
ProductsPage :
import React, {useState} from 'react'
import './ProductsPage.css'
import Products from '../../components/Products'
import Cart from '../../components/Cart'
const PAGE_PRODUCTS = 'products';
const PAGE_CART = 'cart';
function ProductsPage() {
const [cart, setCart] = useState ([]);
const [page, setPage] = useState (PAGE_PRODUCTS);
const addToCart = (product) => {
setCart ([...cart, {...product}])
}
const removeFromCart = (productToRemove) => {
setCart(cart.filter(product => product !== productToRemove))
}
const navigateTo = (nextPage) => {
setPage(nextPage);
};
return (
<div className="productspage">
<header>
<button className="cart-btn" onClick={()=> navigateTo(PAGE_CART)}>
Go to Cart ({cart.length})
</button>
<button className="products-btn" onClick={()=> navigateTo(PAGE_PRODUCTS)}>
View Products
</button>
</header>
{page === PAGE_PRODUCTS && <Products addToCart={addToCart}/>}
{page === PAGE_CART && <Cart cart={cart} removeFromCart={removeFromCart} />}
<div>
</div>
</div>
);
};
export default ProductsPage;
Products:
import React, {useState} from 'react'
function Products ({ addToCart }) {
const [products] = useState ([
{
name: 'Breakfast ',
cost:'9.99$',
image: 'https://images.unsplash.com/photo-1569420067112-b57b4f024595?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80',
},
{
name: 'Breakfast box ',
cost:'8.99$',
image: 'https://images.unsplash.com/photo-1569419910356-f63064754fc9?ixlib=rb-1.2.1&auto=format&fit=crop&w=700&q=80',
},
{
name: 'Snack box ',
cost:'6.99$',
image: 'https://images.unsplash.com/photo-1569419882964-7db5d339951b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80',
},
{
name: '4 small breakfast bowls ',
cost:'9.99$',
image: 'https://images.unsplash.com/photo-1570649857669-4ad9f896435d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=703&q=80',
}
])
return (
<>
<h1 className="products-title">Products</h1>
<div className="products">
{products.map((product , index) => (
<div className="product" key={index}>
<h3>{product.name}</h3>
<h4>{product.cost}</h4>
<img src={product.image} alt={product.name}/>
<p></p>
<button onClick={() => addToCart(product)}>
Add to Cart
</button>
</div>
))}
</div>
</>
)
}
export default Products;
Cart
import React from 'react'
import products from '../../components/Products'
function Cart ({ cart, removeFromCart }) {
const getTotalCost = (productList) => (
productList.reduce((totalCost, { cost: itemCost }) => totalCost += parseFloat(itemCost), 0)
);
return (
<>
<h1>Cart</h1>
<div className="products">
{cart.map((product , index) => (
<div className="product" key={index}>
<h3>{product.name}</h3>
<h4>{product.cost}</h4>
<img src={product.image} alt={product.name}/>
<button onClick={() => removeFromCart(product)}>
Remove
</button>
{getTotalCost(products)}
</div>
))}
</div>
</>
)
}
export default Cart;

Answer 1

In the second code snippet, where you are calling {getTotalCost(products)}, you are using the products component you are importing on line 2, which is a Component, not a List, so the reduce function does not exist on it, which is why you're seeing that error.
You probably want {getTotalCost(cart)} instead.