Как правильно удалять параметры из url-строки в react-router-dom?

Question

[Виктор Путин]

Пытаюсь сделать функцию которая будет тоглить параметр в url изменению чекбокса. Все работает, но не могу изменить их в цикле. Нужно добиться поведения когда я буду проходится циклом по всем выбранным параметрам, удалять в условии не нужные, оставляя при этом остальные.

Сейчас моя функция которая добавляет/удаляет параметр выглядит так:

const updateFiltersSearchParams = (paramKey, newValue) => {
    const isParamExist = searchParams.getAll(paramKey).includes(newValue);

    if (!isParamExist) {
      searchParams.append(paramKey, newValue);
      setSearchParams(searchParams);
    } else {
      const updatedSearchParams = new URLSearchParams(
        [...searchParams].filter(
          ([key, value]) => key !== paramKey || value !== newValue
        )
      );
      setSearchParams(updatedSearchParams);
    }
  };

Так я пытаюсь удалить несколько параметров:

const [searchParams, setSearchParams] = useSearchParams();
 const checkboxParams = searchParams.getAll("selected");

 const handleDeleteParams = () => {
    [...checkboxParams].forEach((param) => {
      updateFiltersSearchParams("selected", param);
    });
  };

Использую react-router-dom 6.
Песочница.

Answer 1

[0xD34F]

const toggleSearchParams = params => {
  const newSearchParams = [...searchParams];

  for (const n of params) {
    const index = newSearchParams.findIndex(m => n[0] === m[0] && n[1] === m[1]);
    if (index === -1) {
      newSearchParams.push(n);
    } else {
      newSearchParams.splice(index, 1);
    }
  }

  setSearchParams(newSearchParams);
};

const handleChangeCheckBoxValue = e => {
  toggleSearchParams([ [ 'selected', e.target.value ] ]);
};

const handleDeleteParams = () => {
  toggleSearchParams(checkboxParams.map(n => [ 'selected', n ]));
};