今月のカレンダーが取得できない

Question

前提・実現したいこと

今月のカレンダーをReact.js dayjsで表示したい。

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

GridList.js:44 Material-UI: The GridList component was renamed to ImageList to align with the current Material Design naming.

You should use `import { ImageList } from '@material-ui/core'`
or `import ImageList from '@material-ui/core/ImageList'`.

該当のソースコード

import React from "react";
import GridList from "@material-ui/core/GridList";
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}>
      <GridList className={styles.grid} cols={7} spacing={0} cellHeight="auto">
        {calendar.map((c) => (
          <li>
            <div className={styles.element}>{c}</div>
          </li>
        ))}
      </GridList>
    </div>
  );
};

export default CalendarBoard;

試したこと

import ImageList from '@material-ui/core/ImageList';の導入。ドキュメントやQiitaでの類似の質問を閲覧、導入。

Comments

[maisumakun]

> import ImageList from '@material-ui/core/ImageList';の導入。

（コード側でも）GridListをImageListに差し替える、ということは行いましたでしょうか？

[itou-.-hiro]

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;

確認したのですが、0~34まで順番に並ぶだけでした。

[maisumakun]

ひとまず、質問文に提示されたエラーは解決したようですね、おめでとうございます。

[itou-.-hiro]

ありがとうございます！助かりました。