Price filtering ascending & descending React js - reactjs

Question

I tried to set up the functionality to filter my product in an ascending or descending manner.
If you check my code below in order to access the price of each product I tried to map through the products, remove then the dollar sign and sort it to ascending and finally set the new state of the products.
But now I feel confused now because I have the sorted array but no more the entire product when trying to set the new state of the product ??
Thank you for helping
const data = [
{
category: "Sporting Goods",
price: "$49.99",
stocked: true,
name: "Football",
},
{
category: "Sporting Goods",
price: "$9.99",
stocked: true,
name: "Baseball",
},
{
category: "Sporting Goods",
price: "$29.99",
stocked: false,
name: "Basketball",
},
{
category: "Electronics",
price: "$99.99",
stocked: true,
name: "iPod Touch",
},
{
category: "Electronics",
price: "$399.99",
stocked: false,
name: "iPhone 5",
},
{ category: "Electronics", price: "$199.99", stocked: true, name: "Nexus 7" },
];
export default data;
const App = () => {
const [searchValue, setSearchValue] = useState("");
const [productsInfo, setProductsInfo] = useState([]);
const handleChange = (e) => {
setSearchValue(e.target.value);
};
const selectedChangeFilter = (e) => {
if (e.target.value === "sporting goods") {
const sportingGoods = data.filter(
(product) => product.category === "Sporting Goods"
);
setProductsInfo(sportingGoods);
}
if (e.target.value === "electronics") {
const electronicsGoods = data.filter(
(product) => product.category === "Electronics"
);
setProductsInfo(electronicsGoods);
}
if (e.target.value === "lowest price") {
const lowestPriceGoods = data
.map((product) => product.price.substr(1))
.sort((a, b) => a - b);
console.log(lowestPriceGoods);
setProductsInfo(lowestPriceGoods);
}
if (e.target.value === "all") {
setProductsInfo(data);
}
};
const searchProducts = (products) => {
if (searchValue.toLowerCase().trim() === "") {
setProductsInfo(products);
} else {
const seekedItem = productsInfo.filter(
(product) =>
product.name.toLowerCase().trim().includes(searchValue) ||
product.category.toLowerCase().trim().includes(searchValue)
);
setProductsInfo(seekedItem);
}
};
return (
<div>
<SearchInput
handleChange={handleChange}
searchValue={searchValue}
selectedChangeFilter={selectedChangeFilter}
/>
<Products
data={data}
searchValue={searchValue}
productsInfo={productsInfo}
searchProducts={searchProducts}
/>
</div>
);
};
export default App;

Answer 1

Try this improved code
const selectedChangeFilter = (e) => {
const { value } = e.target
if (value === "sporting goods") {
const sportingGoods = data.filter(
(product) => product.category === "Sporting Goods"
);
setProductsInfo(sportingGoods);
}
if (value === "electronics") {
const electronicsGoods = data.filter(
(product) => product.category === "Electronics"
);
setProductsInfo(electronicsGoods);
}
if (value === "lowest price") {
const lowestPriceGoods = data.sort((el1,el2) => el1.price.localeCompare(el2.price, undefined, {numeric: true}));
setProductsInfo([...lowestPriceGoods]);
}
if (value === "highest price") {
const highestPriceGoods = data.sort((el1,el2) => el2.price.localeCompare(el1.price, undefined, {numeric: true}));
setProductsInfo([...highestPriceGoods]);
}
if (value === "all") {
setProductsInfo(data);
}
};

Answer 2

You can use string#localeCompare to sort your array based on the number by using numeric property.
const data = [ { category: "Sporting Goods", price: "$49.99", stocked: true, name: "Football", }, { category: "Sporting Goods", price: "$9.99", stocked: true, name: "Baseball", }, { category: "Sporting Goods", price: "$29.99", stocked: false, name: "Basketball",}, { category: "Electronics", price: "$99.99", stocked: true, name: "iPod Touch", }, { category: "Electronics", price: "$399.99", stocked: false, name: "iPhone 5", }, { category: "Electronics", price: "$199.99", stocked: true, name: "Nexus 7" }, ];
data.sort((a,b) => a.price.localeCompare(b.price, undefined, {numeric: true}));
console.log(data);
.as-console-wrapper { max-height: 100% !important; top: 0; }