Adding a array of string to my query

[KatuGT]

First of all, thank to this awesome library! it´s really helpfull!

now, well, my situation is...

I am trying to make work a filter fuction, and I have some checkbox and I need to show at the url the selected ones

  const [selectedBrands, setSelectedBrands] = useState([brands]);

  const [selectedCategories, setSelectedCategories] = useState([]);

  const handleChange = (event) => {
    const { name, value, checked } = event.target;

    if (name === "brand") {
      setSelectedBrands((prevBrands) =>
        checked
          ? [...prevBrands, value]
          : prevBrands.filter((brand) => brand !== value),
      );
    } else if (name === "category") {
      setSelectedCategories((prevCategories) =>
        checked
          ? [...prevCategories, value]
          : prevCategories.filter((category) => category !== value),
      );
    }
    setBrands((prev) => [prev, ...selectedBrands]);
  };

• at first, this is how it look the "tienda"section after I clicked a brand at home
  
  ( I cann´t make work the defaultChecked but thats another history)

now, after I check some other brands

I also tried somthing with useEffect but it ended up with infinite loop

[KatuGT]

Update!

I managed to make it work with this

 useEffect(() => {
    
    const brandsString = selectedBrands.join(",");
    setBrands(brandsString);

  }, [brands, selectedBrands, setBrands]);

buuut now there is another problem

in my home page I have a slider with the brands and it is supposed to sent you to http://localhost:3000/tienda?brands=QUIMECO

it does, but "QUIMECO" appears 1 second and then vanish

[franky47]

In your original post you show code using React's useState, could you show us the relevant useQueryState hook please?

Note that since you're working with arrays, the parseAsArrayOf parser may help with query string formatting here:

import { useQueryState, parseAsArrayOf, parseAsString } from 'next-usequerystate'

const [brands, setBrands] = useQueryState(
  'brands',
  parseAsArrayOf(parseAsString)
    .withDefault([brands])
)