TodoEditでdateの初期値を正常に読む込めない

[ytanaka44]

背景

下記のように設定するとエラーになる。

value={formik.values.date}

エラー内容

value.isBefore is not a function
TypeError: value.isBefore is not a function

[ytanaka44]

参考 https://stackoverflow.com/questions/76035120/getting-typeerror-date-isbefore-is-not-a-function-while-using-material-ui-date

[ytanaka44]

対応

formik.values.dateがtrueの場合はdayjs関数で受け取り、falseの場合はnullとすることで初期値を正常に取得することができる。

value={
  formik.values.date ? dayjs(formik.values.date) : null
}

[ytanaka44]

追加のエラー

updateTodoで更新した際に下記エラーが発生

Objects are not valid as a React child (found: object with keys {$L, $u, $d, $y, $M, $D, $W, $H, $m, $s, $ms, $x, $isDayjsObject}). If you meant to render a collection of children, use an array instead.

onChangeもdayjsでformatすることで解決

onChange={(date) => {
  formik.setFieldValue(
    "date",
    date ? dayjs(date).format("YYYY-MM-DD") : null
  );
}}