I do not what is causing the error TypeError: products.reduce is not a function
Code
import React, {useState, useEffect} from 'react';
const Checkout = ({ products }) => {
const getTotal = () => {
return products.reduce((currentValue, nextValue) => {
return currentValue + nextValue.quantity * nextValue.price;
}, 0)
};
return<div>
<div>Total: ${getTotal()}</div>
</div>
}
export default Checkout;Thank you for your help
As pointed out in the comments, this might be caused by products property not having a value.
This can simply be fixed by adding a default value of the property:
import React, {useState, useEffect} from 'react';
const Checkout = ({ products = [] }) => {
const getTotal = () => {
return products.reduce((currentValue, nextValue) => {
return currentValue + nextValue.quantity * nextValue.price;
}, 0)
};
return<div>
<div>Total: ${getTotal()}</div>
</div>
}
export default Checkout;
or:
import React, {useState, useEffect} from 'react';
const Checkout = ({ products }) => {
const getTotal = () => {
return (products || []).reduce((currentValue, nextValue) => {
return currentValue + nextValue.quantity * nextValue.price;
}, 0)
};
return<div>
<div>Total: ${getTotal()}</div>
</div>
}
export default Checkout;
Or return default value earlier:
import React, {useState, useEffect} from 'react';
const Checkout = ({ products }) => {
const getTotal = () => {
if (!Array.isArray(products)) {
return 0;
}
return products.reduce((currentValue, nextValue) => {
return currentValue + nextValue.quantity * nextValue.price;
}, 0)
};
return<div>
<div>Total: ${getTotal()}</div>
</div>
}
export default Checkout;
productsis not an array. Check your runtime environment. Are you sure you're passing in the data that you expect?console.log(products)and see what the value is right before you hit your errorproductscan't get any data of array, make sure you receive data withproducts, you can check withconsole.log(products), if everything is ok, then you need to check your internet connection orAPIlogic with the postman or anything else.