React ビュー表示が上手くいかないです。 助けてください(^◇^;)

Question

皆様。お疲れ様です。
困っているので是非、お力をお貸しください。

Tech pitというプログラミング学習サービスをしています。
『React/ReduxでGoogleカレンダー風カレンダーアプリケーションを作ろう』という教材です。

上記のようなビューにしたいのですが、下記のように表示されてしまいます。(^◇^;)

記述したコードです。

import React from "react";
import { GridList, Typography } from "@material-ui/core";
const days = ["日", "月", "火", "水", "木", "金", "土"];
import CalendarElement from "../CalendarElement";
import { createCalendar } from "../../services/calendar";

import * as styles from "./style.css";

const calendar = createCalendar();

const CalendarBoard = () => {
  return (
    <div className={styles.container}>
      <GridList className={styles.grid} cols={7} spacing={0} cellHeight="auto">
        {days.map((d) => (
          <li key={d}>
            <Typography
              className={styles.days}
              color="textSecondary"
              align="center"
              variant="caption"
              component="div"
            >
              {d}
            </Typography>
          </li>
        ))}
      </GridList>
    </div>
  );
};

export default CalendarBoard;

よろしくお願いします。

Answer 1

下記のように表示されてしまいます。

提示されたコードには、曜日を表示する処理しか書かれていないようです。

Comments

[HayataYoshida]

お疲れ様です。
回答ありがとうございます！
下記に日付のフォーマットは記述しています。
src/components/CalendarElements/index.jsx

import React from "react";
import { Typography } from "@material-ui/core";

import * as styles from "./style.css";

const CalendarElement = ({ day }) => {
// 文字列のフォーマットをどうするか
const isFirstDay = day.date() === 1;
// 月の最初だけ月情報をつける
const format = isFirstDay ? "M月D日" : "D";

return (
<div className={styles.element}>
<Typography
className={styles.date}
align="center"
variant="caption"
component="div"
>
{day.format(format)}
</Typography>
</div>
);
};

export default CalendarElement;

[maisumakun]

CalendarElementはどのように呼び出していますか？

[HayataYoshida]

少々お待ちください！

[HayataYoshida]

返事が遅くなり申し訳ありません。

src/components/CalendarBoard/index.jsxに以下を記述しています。
```
import CalendarElement from "../CalendarElement";
```

[maisumakun]

表示する部分はどの様になっていますか？

[HayataYoshida]

お疲れ様です！
src/components/CalendarElement/index.jsx
以下の通りになります！

import React from "react";
import { Typography } from "@material-ui/core";

import * as styles from "./style.css";

const CalendarElement = ({ day }) => {
// 文字列のフォーマットをどうするか
const isFirstDay = day.date() === 1;
// 月の最初だけ月情報をつける
const format = isFirstDay ? "M月D日" : "D";

return (
<div className={styles.element}>
<Typography
className={styles.date}
align="center"
variant="caption"
component="div"
>
{day.format(format)}
</Typography>
</div>
);
};

export default CalendarElement;