# カレンダーの予定作成機能4 次にエラーハンドリングを行いましょう。予定のタイトルがない場合にエラーメッセージを表示し、予定を作成できないようにいます。 `errorMessage`というstateを定義しましょう。そしてhandleCreateScheduleの中で、`title`がない場合に`errorMessage`をセットして`return`にて処理が中断するようにします。`title`がある場合は`errorMessage`を空にします。

...
export const CreateScheduleModal = ({
  isOpen,
  closeModal,
  addSchedule,
}: PropsType) => {
  const [newSchedule, setNewSchedule] = useState<NewSchedule>({
    title: "",
    date: format(new Date(), "yyyy-MM-dd"),
    description: "",
  })
  const [errorMessage, setErrorMessage] = useState("")


  const handleCreateSchedule = (event: FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    const { title, date, description } = newSchedule;
    if (title === "") {
      setErrorMessage("タイトルを入力してください")
      return
    } else {
      setErrorMessage("");
    }
    const schedule: Schedule = {
      id: 100001,
      title,
      date: parse(date, "yyyy-MM-dd", new Date),
      description: description,
    }
    addSchedule(schedule)
    setNewSchedule({
      title: "",
      date: format(new Date(), "yyyy-MM-dd"),
      description: "",
    })
    closeModal()
  };
...

ではerrorMessageを表示するようにしましょう。

...
        <h3 className="text-center text-3xl text-lime-800 font-bold pb-5">
          予定作成
        </h3>
        {errorMessage !== "" && (
          <div className="p-5 mb-5 bg-red-500 text-white text-center rounded-lg">
            {errorMessage}
          </div>
        )}
...

こちらでブラウザにて確認すると、タイトルを入力しない状態でボタンを押した際にエラーメッセージが表示されるかと思います。

ここまでの作業をcommitしましょう。 ```bash git add . ``` ```bash git commit ``` commitメッセージは ``` feat: カレンダーフォームにてエラーハンドリングを追加 ``` としましょう。