# カレンダーのナビゲーションメニューを作成2 作成したナビゲーションメニューにて、`currentDate`を変更できるようにします。 CalendarNav.tsxにて`setCurrentDate`を受け取れるようにしましょう。そして、`currentDate`の`month`を1増やす関数と、1減らす関数、本日に変更する関数を作成します。 monthの増減に関しては、`ddate-fns`の`addMonths`を使用します。`addMonths`の一つ目の引数に日付を渡し、二つ目の引数に数値を渡すことで、日付に数値分の月を加算することができます。ちなみに、`setState`では関数を渡すことができ、引数に元々の値を取得することができるので、`(prevDate) => addMonths(prevDate, -1)`と渡すことで、元々の`currentDate`から1ヶ月減算することができます。では作成した関数を、アイコンとボタンのonClickにセットしましょう。

import { Dispatch, SetStateAction } from "react"
import { addMonths } from "date-fns"
import { FaArrowAltCircleLeft, FaArrowAltCircleRight } from "react-icons/fa"
import { PrimaryBtn } from "../atoms/PrimaryBtn"

type PropsType = {
  setCurrentDate: Dispatch<SetStateAction<Date>>
};

export const CalendarNav = ({ setCurrentDate }: PropsType) => {
  const changeToday = () => setCurrentDate(new Date())
  const changePrevMonth = () =>
    setCurrentDate((prevDate) => addMonths(prevDate, -1))
  const changeNextMonth = () =>
    setCurrentDate((prevDate) => addMonths(prevDate, 1))

  return (
    <div className="w-[80%] flex justify-between mb-2">
      <div className="flex items-center text-white gap-4">
        <FaArrowAltCircleLeft
          className="text-lime-800 text-2xl"
          onClick={changePrevMonth}
        />
        <PrimaryBtn size="sm" onClick={changeToday}>
          今日
        </PrimaryBtn>
        <FaArrowAltCircleRight
          className="text-lime-800 text-2xl"
          onClick={changeNextMonth}
        />
      </div>
    </div>
  )
}

`CalendarPage.tsx`にて、`CalendarNav`に`setCurrentDate`を渡しましょう。

import { getMonth} from "date-fns";
import { CalendarHeader } from "../organisms/CalendarHeader";
import { CalendarBody } from "../organisms/CalendarBody";
import { useCalendar } from "../../hooks/useCalendar";
import { useState } from "react";
import { CalendarNav } from "../organisms/CalendarNav";

export const CalendarPage = () => {
  const [currentDate, setCurrentDate] = useState(new Date())
  const { dateList } = useCalendar({ currentDate: currentDate });

  return (
    <>
      <h1 className=" font-bold text-3xl mb-5">{`${
        getMonth(currentDate) + 1
      }月`}</h1>
      <CalendarNav setCurrentDate={setCurrentDate} />
      <table className="w-[80%] border-collapse border-2 border-solid border-lime-800 table-fixed">
        <CalendarHeader />
        <CalendarBody currentDate={currentDate} dateList={dateList} />
      </table>
    </>
  );
}

また、`useCalendar`内の`useEffect`にて`currentDate`を監視するようにしましょう。

...
  useEffect(() => {
    const monthOfSundayList = eachWeekOfInterval({
      start: startOfMonth(currentDate),
      end: endOfMonth(currentDate),
    });
    const newDateList: DateList = monthOfSundayList.map((date) => {
      return eachDayOfInterval({
        start: date,
        end: endOfWeek(date),
      }).map((date) => ({ date, schedules: [] as Schedule[] }));
    });

    const scheduleList = getScheduleList();
    scheduleList.forEach((schedule) => {
      const firstIndex = newDateList.findIndex((oneWeek) => {
        return oneWeek.some((item) => isSameDay(item.date, schedule.date));
      });
      if (firstIndex === -1) return;
      const secondIndex = newDateList[firstIndex].findIndex((item) => {
        return isSameDay(item.date, schedule.date);
      });

      newDateList[firstIndex][secondIndex].schedules = [
        ...newDateList[firstIndex][secondIndex].schedules,
        schedule,
      ];
    });

    setDateList(newDateList);
  }, [currentDate]);
...

これでナビゲーションメニューを押すと、先月、次月、今月のカレンダーを表示することができます。

ここまでの作業をcommitしましょう。 ```bash git add . ``` ```bash git commit ``` commitメッセージは ``` feat: カレンダーのナビゲーションを押した際に、先月、次月、今月のカレンダーを表示するようにした ``` としましょう。ではカレンダーナビゲーションの実装が完了したので、GitHubにpushしましょう。 ```basic git push origin feature/prev-and-next-month-calendar ``` これでGitHubのリポジトリのページにいき、main <- feature/prev-and-next-month-calendarのPRを作成しましょう。 PRのタイトルは ``` feat: カレンダーのナビゲーションメニューを作成 ``` としましょう。作成したら自身で`Merge pull request`を押してmergeしましょう。 mergeが完了したらWarpに戻り、mainをpullしましょう。 ```bash git switch main ``` ```bash git pull origin main ```