# カレンダーの予定作成機能2 次に予定作成するために、入力フォームを作成していきます。フォームの入力をstateにて管理するため、`newSchedule`というstateを定義しましょう。その前にNewScheduleという型を定義しましょう。 `types/calendar.ts`に定義しましょう。

export type Schedule = {
  id: number;
  date: Date;
  title: string;
  description: string;
}

export type DateList = {
  date: Date;
  schedules: Schedule[]
}[][]

export type NewSchedule = {
  title: string;
  date: string;
  description: string;
};

では`newSchedule`というstateを定義します。そして`newSchedule`を変更する関数を定義します。 newScheduleに関しては、`2024-01-01`という形式の文字列で扱いたいため、（`

import Modal from "react-modal";
import { ChangeEvent, useState } from "react";
import { format } from "date-fns";
import { Input } from "../atoms/Input";
import { PrimaryBtn } from "../atoms/PrimaryBtn";
import { NewSchedule } from "../../types/calendar";

type PropsType = {
  isOpen: boolean;
  closeModal: () => void;
};

const customStyles = {
  content: {
    top: "50%",
    left: "50%",
    width: "30%",
    height: "50vh",
    transform: "translate(-50%, -50%)",
  },
};

export const CreateScheduleModal = ({
  isOpen,
  closeModal,
}: PropsType) => {
  const [newSchedule, setNewSchedule] = useState<NewSchedule>({
    title: "",
    date: format(new Date(), "yyyy-MM-dd"),
    description: "",
  });
  
  const changeNewSchedule = (
    event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
  ) => {
    const { name, value } = event.target;
    setNewSchedule({ ...newSchedule, [name]: value });
  }
...

次にform部分を作成します。

...
  return (
    <Modal isOpen={isOpen} style={customStyles} onRequestClose={closeModal}>
      <div>
        <h3 className="text-center text-3xl text-lime-800 font-bold pb-5">
          予定作成
        </h3>
        <form className="flex flex-col gap-8">
          <div className="w-[100%] flex items-center">
            <label htmlFor="title-form" className="w-[30%] text-lime-800">タイトル</label>
            <Input
              id="title-form"
              name="title"
              type="text"
              value={newSchedule.title}
              onChange={changeNewSchedule}
            />
          </div>
          <div className="w-[100%] flex items-center">
            <label htmlFor="date-form" className="w-[30%] text-lime-800">日付</label>
            <Input
              id="date-form"
              name="date"
              type="date"
              value={newSchedule.date}
              onChange={changeNewSchedule}
            />
          </div>
          <div className="w-[100%] flex items-center">
            <label htmlFor="description-form" className="w-[30%] text-lime-800">内容</label>
            <textarea
              id="description-form"
              name="description"
              value={newSchedule.description}
              onChange={changeNewSchedule}
              className="w-full border-4 border-solid border-lime-800 rounded-md p-2"
            />
          </div>
          <div className="flex justify-center">
            <PrimaryBtn size="lg" onClick={() => null}>
              作成
            </PrimaryBtn>
          </div>
        </form>
      </div>
    </Modal>
  )
...

`nesSchedule`の`description`に関しては、`textarea`にて長文を入力できるようにします。`textarea`をコンポーネントに切り出しましょう。`atoms`配下に`Textarea.tsx`を作成します。こちらはpropsとして、textareaタグの属性全てを受け取れるようにするため、`ComponentProps<"textarea">`とします。

import { ComponentProps } from "react";

export const Textarea = (props: ComponentProps<"textarea">) => {
  return (
    <textarea
      {...props}
      className="w-full border-4 border-solid border-lime-800 rounded-md p-2"
    />
  );
};

こちらを`CreateScheduleModal.tsx`にて呼び出しましょう。

...
          <div className="w-[100%] flex items-center">
            <label className="w-[30%] text-lime-800">内容</label>
            <Textarea
              name="description"
              value={newSchedule.description}
              onChange={changeNewSchedule}
            />
          </div>
...

上記にて、以下のような画面が表示され、`newSchedule`を変更することができるかと思います。

ここまでの作業をcommitしましょう。 ```bash git add . ``` ```bash git commit ``` commitメッセージは ``` feat: カレンダー作成モーダルのフォーム部分を作成 ``` としましょう。