[Reactカレンダーライブラリ]同じ日付をクリックした時に保持している配列から消したい

Question

前提・実現したいこと

https://github.com/hernansartorio/react-nice-dates/tree/master/src
上のReactカレンダーライブラリを使用しているのですが、処理の一部がわかりません。
ここ（https://reactnicedates.hernansartorio.com/）で解説されている複数日程を選択できるものがありますが、同じ日付をクリックした時に元に戻らない仕様になっています。
以下のソースコード上でのmodifiers部分だと思いますが、処理がよくわかりません。
要は同じ日付をクリックした時にselectedDatesからその日付を消したいということです。
わかる方がいましたらコメントお願いします。

該当のソースコード

import React, { useState } from 'react'
import { isSameDay } from 'date-fns'
import { enGB } from 'date-fns/locale'
import { Calendar } from 'react-nice-dates'
import 'react-nice-dates/build/style.css'
// Very rough implementation of multiple date selection
export default function PickDateCalendar() {
  const [selectedDates, setSelectedDates] = useState([])
  const modifiers = {
    selected: date => selectedDates.some(selectedDate => isSameDay(selectedDate, date))
  }
  const handleDayClick = date => {
    setSelectedDates([...selectedDates, date])
  }
  return (
    <Calendar onDayClick={handleDayClick} modifiers={modifiers} locale={enGB} />
  )
}

Answer 1

質問にもある通り、提示されたPickDateCalendarコンポーネントでは、選択された日付の配列をselectedDatesに持っています。
この配列に日付を追加・削除することで、選択された日付を増減させることができ、modifiers内で選択された日付であるか判断しています。

今回のソースコードで、selectedDatesを操作しているのは、handleDayClickです。このメソッド内では日付を追加するだけの状態になっています。そこで「クリックされた日付が既に配列に存在しているか」を確認し配列の値を変える関数に書き換えましょう。

以下のコードはhandleDayClickの書き換え例です。（動作確認はしていません）

const handleDayClick = date => {
  if (selectedDates.some(selectedDate => isSameDay(selectedDate, date))) {
    // クリックされた日付が既に存在していた場合、その日付を配列から取り除き、setSelectedDatesを実行します。
    setSelectedDates(
      selectedDates.filter(selectedDate => !isSameDay(selectedDate, date))
    )
  } else {
    // クリックされた日付が既に存在していない場合、今まで通り配列に日付を追加します。
    setSelectedDates([...selectedDates, date])
  }
}

Comments

[aiai8976]

できました！
丁寧な解説ありがとうございました。