I have some array of products inside filteredProducts variable and wanted to sort them according to the price and newly added products.
When using prevState like this without having { } in the callback function, the code runs fine.
useEffect(() => {
if(sort === "newest") {
setFilteredProducts((prevState) =>
[...prevState].sort((a, b) => a.createdAt - b.createdAt)
);
}
else if (sort === "asc") {
setFilteredProducts((prevState) =>
[...prevState].sort((a ,b) => a.price - b.price)
);
}
else {
setFilteredProducts((prevState) =>
[...prevState].sort((a, b) => b.price - a.price)
);
}
}, [sort]);
But when using { } for the prevState callback function like this
if(sort === "newest") {
setFilteredProducts((prevState) => {
[...prevState].sort((a, b) => a.createdAt - b.createdAt)
});
}
, it is just throwing error in console.
When using the brackets you are declaring a function body, and need to return a value, i.e. the next state. Arrow functions without a function body use an implicit (vs explicit) return.
setFilteredProducts((prevState) => {
return [...prevState].sort((a, b) => a.createdAt - b.createdAt);
});