今月のカレンダーを取得したいです。

Question

前提・実現したいこと

React.js Dayjsでカレンダーを作成しているのですが、今月のカレンダーを取得したいです。

発生している問題・エラーメッセージ

Failed prop type: The prop `cellHeight` of `ForwardRef(ImageList)` is deprecated. Use the `rowHeight` prop instead.
Failed prop type: The prop `spacing` of `ForwardRef(ImageList)` is deprecated. Use the `gap` prop instead.Failed prop type: The prop `spacing` of `ForwardRef(ImageList)` is deprecated. Use the `gap` prop instead.

該当のソースコード

import React from "react";
import ImageList from "@material-ui/core/ImageList";
import * as styles from "./style.css";
import dayjs from "dayjs";
import "dayjs/locale/ja";

dayjs.locale("ja");

const createCalendar = () => {
  //今月の最初の日を追加
  const firstDay = dayjs().startOf("month");

  //最初の日の曜日のindexを取得
  const firstDayIndex = firstDay.day();

  return Array(35)
    .fill(0)
    .map((_, i) => i - firstDayIndex);
};

const calendar = createCalendar();

const CalendarBoard = () => {
  console.log(calendar);
  return (
    <div className={styles.container}>
      <ImageList className={styles.grid} cols={7} spacing={0} cellHeight="auto">
        {calendar.map((c) => (
          <li>
            <div className={styles.element}>{c}</div>
          </li>
        ))}
      </ImageList>
    </div>
  );
};

export default CalendarBoard;

試したこと

Material-UI公式ドキュメント閲覧、Qiita類似の内容を閲覧。

Comments

[p19ljk]

エラー文の意味は読み取れていますか？
別の質問もされているようですが、そちらも同様にエラー文に書いてあることがそのまま解決方法です。
まずはエラー文を日本語訳することからかと思います。

[itou-.-hiro]

翻訳をしてみたんですが、中々意味が分からず質問させていただきました。
p19ljk様から連絡いただき、もう一度翻訳してみたところ、ImageListで非推奨を物を使っていたということでした。
とても勉強になりました。
質問する前にしっかり自分なりにもっと考えたいと思います。
ありがとうございました。

[p19ljk]

そうですねー、「A は非推奨(deprecated)なのでBを使ってください」って書いてあるだけでした！

[itou-.-hiro]

しっかり文章を読まず、理解できてないまま質問してしまい、申し訳ありませんでした。
わざわざ教えていただき、ありがとうございます！
これからも勉強頑張りたいと思います。