How to filter in React Router using searchParams

Question

I am currently making a product filter website with react-router. I am able to get the searchParams, for example "color: black" but as soon as I select a different color it replaces the current selected value, but I would like to set multiple values example: black, grey, etc.

I tried with searcgParams.getAll but couldn't get it to work.

import { useState } from "react";
import { Link, useSearchParams, useLoaderData } from "react-router-dom";
import FilterNav from "../../components/FilterNav";
import { getProducts } from "../../api";

export function loader() {
  return getProducts();
}

export default function Products() {
  const [searchParams, setSearchParams] = useSearchParams();
  // const [selectedCategory, setSelectedCategory] = useState(
  //   searchParams.get("category")
  // );
  // const [selectedBrand, setSelectedBrand] = useState(searchParams.get("brand"));
  // const [selectedColor, setSelectedColor] = useState(searchParams.get("color"));

  const [error, setError] = useState(null);

  const products = useLoaderData();

  const uniqueCategories = [
    ...new Set(products.map((product) => product.category)),
  ];
  const uniqueBrands = [...new Set(products.map((product) => product.brand))];
  const uniqueColors = [...new Set(products.map((product) => product.color))];
  const uniquePrices = [...new Set(products.map((product) => product.price))];

  const selectedCategory = searchParams.get("category");
  const selectedBrand = searchParams.get("brand");
  const selectedColor = searchParams.get("color");

  function handleFilterChange(key, value) {
    setSearchParams((prevParams) => {
      let values = prevParams.get(key)?.split(",");

      if (values) {
        // existing values, add/remove specific values
        if (values.includes(value)) {
          // remove value from array
          values = values.filter((currentValue) => currentValue !== value);
        } else {
          // append value to array
          values.push(value);
        }

        if (!!values.length) {
          // set new key-value if values is still populated
          prevParams.set(key, values);
        } else {
          // delete key if values array is empty
          prevParams.delete(key);
        }
      } else {
        // no values for key, create new array with value
        prevParams.set(key, [value]);
      }
      if (value === null) {
        prevParams.delete(key);
      }

      return prevParams;
    });
  }

  // function handleFilterChange(key, value) {
  //   setSearchParams((prevParams) => {
  //     if (value === null) {
  //       prevParams.delete(key);
  //     } else {
  //       prevParams.set(key, value);
  //     }
  //     return prevParams;
  //   });
  // }

  const filteredProducts = products.filter((product) => {
    const filteredBrand =
      !selectedBrand || selectedBrand.includes(product.brand);
    const filteredCategory =
      !selectedCategory || selectedCategory.includes(product.category);
    const filteredColor =
      !selectedColor || selectedColor.includes(product.color);
    return filteredBrand && filteredCategory && filteredColor;
  });

  const allProducts = filteredProducts.map((product) => (
    <div key={product.id} className="product-tile">
      <Link
        to={product.id}
        state={{
          search: `?${searchParams.toString()}`,
          category: selectedCategory,
        }}
      >
        <h2>
          {product.brand} {product.name}
        </h2>
        <img src={product.image} />
        <div className="product-info">
          <p>
            {product.category} - {product.color} - ${product.price}{" "}
          </p>
        </div>
      </Link>
    </div>
  ));

  if (error) {
    return <h1>There was an error: {error.message}</h1>;
  }

  return (
    <div className="product-list-container">
      <FilterNav
        categoryOptions={uniqueCategories}
        brandOptions={uniqueBrands}
        colorOptions={uniqueColors}
        selectedCategory={selectedCategory}
        selectedBrand={selectedBrand}
        selectedColor={selectedColor}
        handleFilterChange={handleFilterChange}
      />
      <div className="product-list">{allProducts}</div>
    </div>
  );
}

import { useState } from "react";
export default function FilterNav(props) {
  // const [selectedCategories, setSelectedCategories] = useState([]);

  // const handleCategoryClick = (category) => {
  //   if (selectedCategories.includes(category)) {
  //     setSelectedCategories(selectedCategories.filter((c) => c !== category));
  //     props.handleFilterChange("category", null); // Remove the category filter
  //   } else {
  //     setSelectedCategories([...selectedCategories, category]);
  //     props.handleFilterChange("category", category); // Apply the category filter
  //   }
  // };

  const renderFilterList = (options, key) => {
    return options.map((value, id) => {
      return (
        <a onClick={() => props.handleFilterChange(key, value)} key={id}>
          {value}
        </a>
      );
    });
  };

  return (
    <>
      <div className="product-list-filter-buttons">
        <div className="dropdown">
          <button className="dropbtn">Brands</button>
          <div className="dropdown-content">
            {renderFilterList(props.brandOptions, "brand")}
          </div>
        </div>

        <div className="dropdown">
          <button className="dropbtn">Categories</button>
          <div className="dropdown-content">
            {renderFilterList(props.categoryOptions, "category")}
          </div>
        </div>

        <div className="dropdown">
          <button className="dropbtn">Colors</button>
          <div className="dropdown-content">
            {renderFilterList(props.colorOptions, "color")}
          </div>
        </div>
        {props.selectedCategory ||
        props.selectedBrand ||
        props.selectedColor ? (
          <button
            onClick={() => {
              props.handleFilterChange("category", null);
              props.handleFilterChange("brand", null);
              props.handleFilterChange("color", null);
            }}
            className="product-type clear-filters"
          >
            Clear all filters
          </button>
        ) : null}
      </div>

      <div>
        {props.selectedCategory
          ? props.categoryOptions.map((category, index) => (
              <button
                key={index}
                onClick={() => props.handleFilterChange("category", category)}
              >
                <span aria-hidden="true">&times; {category}</span>
              </button>
            ))
          : null}

        {props.selectedBrand ? (
          <button onClick={() => props.handleFilterChange("brand", null)}>
            <span aria-hidden="true">&times; {props.selectedBrand}</span>
          </button>
        ) : null}
        {props.selectedColor ? (
          <button onClick={() => props.handleFilterChange("color", null)}>
            <span aria-hidden="true">&times; {props.selectedColor}</span>
          </button>
        ) : null}
      </div>
    </>
  );
}

Answer 1

Instead of using searchParams.set method which replaces existing key-value entries you likely want to use the searchParams.append which will add multiple keys for the values.

Example:

function handleFilterChange(key, value) {
  setSearchParams((prevParams) => {
    if (value === null) {
      prevParams.delete(key);
    } else {
      prevParams.append(key, value); // <-- append key-value pair
    }
    return prevParams;
  });
}

Then using searchParams.getAll will return an array of values associated with the specific key.

Example, if the search string is something like `"...?color=black+color=grey"

searchParams.getAll("color"); // ["black", "grey"]

The above approach is a bit of an all-or-nothing solution though, e.g. using searchParams.delete("color") will remove all color queryString parameters. If you want more fine-grained control over individual color selections then you'll need to manage this yourself manually.

The following example should be close to what you may be looking for for individual parameter:

function handleFilterChange(key, value) {
  setSearchParams((prevParams) => {
    let values = prevPrams.get(key)?.split(",");

    if (values) {
      // existing values, add/remove specific values
      if (values.includes(value) {
        // remove value from array
        values = values.filter(currentValue => currentValue !== value);
      } else {
        // append value to array
        value.push(value);
      }

      if (!!values.length) {
        // set new key-value if values is still populated
        prevParams.set(key, values);
      } else {
        // delete key if values array is empty
        prevParams.delete(key);
      }
    } else {
      // no values for key, create new array with value
      prevParams.set(key, [value]);
    }

    return prevParams;
  });
}