how to set original state after category filter for lowest price to all in reactjs-CodePudding

Here is my codesandbox link. https://codesandbox.io/s/bold-lederberg-d2h508?file=/src/Components/Products/Products.js In this filtering when i click highest price its showing correcly and when i again click all filters how can i set back to its original state. please provide any solution for this.

import React, { useState } from "react";
import Products from "./Components/Products/Products";
import SearchInput from "./Components/SearchInput/SearchInput";
import data from "./utils/data";

const App = () => {
  const [searchValue, setSearchValue] = useState("");
  const [productsInfo, setProductsInfo] = useState([]);

  const handleChange = (e) => {
    setSearchValue(e.target.value);
  };

  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);
    }
  };

  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;

CodePudding user response：

Replace:

if (value === "all") {
const copiedData = [...data]
  setProductsInfo(copiedData);
}

CodePudding user response：

The sort function on array in javascript modifies the original array. That is why you are unable to return to original state when you do highest or lowest sort as you modified the original data array. Instead do something like below:

if (value === "lowest price") {
    const lowestPriceGoods = [...data];
    lowestPriceGoods.sort((el1, el2) =>
        el1.price.localeCompare(el2.price, undefined, { numeric: true })
    );
    setProductsInfo(lowestPriceGoods);
}