選択した値のみをqueryParameterとして送信


urlにフィルタに関する情報を表示するために、フィルタされた情報を抽出し、productlist pathの後ろに貼り付けてurlを移動する個別の関数を作成しました.

const themes = ['해변', '숲', '도심'];
const [checkedTheme, setCheckedThemes] = useState([]);

const handleCheckedThemes = e => {
    const curr = checkedTheme;
    if (curr.includes(e.target.defaultValue)) {
      const removeDoubleChecked = curr.filter(
        cur => cur !== e.target.defaultValue
      );

      setCheckedThemes(removeDoubleChecked);
      return;
    }
    setCheckedThemes([...checkedTheme, e.target.defaultValue]);
  };

  const getFormatParams = () => {
    let queryThemes = '';
    let theme = checkedTheme.map(theme => {
      if (checkedTheme[0] === theme) {
        queryThemes += `?themaGroup=${theme}`;
      } else {
        queryThemes += `&themaGroup=${theme}`;
      }

      return queryThemes;
    });
    const finalCheck = theme.length > 0 ? theme[theme.length - 1] : '?' + null;

    const allQueryParams = isVerified
      ? `${finalCheck}&isVerified=1`
      : `${finalCheck}`;

    return allQueryParams;
  };

  const handleSubmit = () => {
    const queryParameter = getFormatParams();
    setIsOpenModal(prev => !prev);

    console.log(queryParameter);

    navigate(`/productlist${queryParameter}`);
  };