I want to create two separate vars based off the same data that when sorted dont affect each other

Viewed 19

I have 2 state vars

  const [services, setServices] = useState([]);
  const [servicesTwo, setServicesTwo] = useState([]);

I retrieve some data from my redux store and set the vars like so

  const searchResults = useSelector((state) => state.search);

  useEffect(() => {
    if (!!searchResults) {
      setServices(searchResults);
      setServicesTwo(searchResults);
  }, [searchResults]);

They are arrays of objects and I want to be able to sort one without affecting the other but currently when I sort them they both change order. This is my sorting code:

  const sortResults = (property) => {
    switch (property) {
      case 0:
        if (resultsSorting === 0) {
          services.products.sort((a, b) => {
            return Number(a.vendorRating) - Number(b.vendorRating);
          });
          setResultsSorting();
        } else {
          services.products.sort((a, b) => {
            return Number(b.vendorRating) - Number(a.vendorRating);
          });
          setResultsSorting(0);
        }
        break;
      case 1:
        if (resultsSorting === 1) {
          services.products.sort((a, b) => {
            return Number(a.vendorYearsExperience) - Number(b.vendorYearsExperience);
          });
          setResultsSorting();
        } else {
          services.products.sort((a, b) => {
            return Number(b.vendorYearsExperience) - Number(a.vendorYearsExperience);
          });
          setResultsSorting(1);
        }
        break;
    }
  };

Some help would be greatly appreciated :)

1 Answers

Like @Webbh mentioned setServices([...searchResults]) on both fixed the problem

Related