【React TypeScript】Material UIのCardとCollapseを使って、内容を展開できるカードを作ってみよう！

import React from "react";
// material-ui
import {
  Card,
  CardHeader,
  CardContent,
  Divider,
  Typography,
  Button,
  Collapse,
} from "@material-ui/core";
import {
  ExpandMore as ExpandMoreIcon,
  ExpandLess as ExpandLessIcon,
} from "@material-ui/icons";
// styles
import styles from "./TextCard.module.scss";

const TextCard = (): JSX.Element => {

  const [expanded, setExpanded] = React.useState(false);
  const handleExpandClick = () => {
    setExpanded(!expanded);
  };

  return (
    <div className={styles.root}>
      <Card className={styles.card}>
        <CardHeader
          title={<Typography variant="h5">TextCard</Typography>}
          subheader="テキストカード"
          className={styles.card_header}
        />
        <Divider />
        <CardContent className={styles.card_content}>
          <Collapse in={!expanded} timeout="auto" unmountOnExit>
            <Typography variant="body1">
              100文字は開かずにみれるようにしよう！！
            </Typography>
          </Collapse>
          <Collapse in={expanded} timeout="auto" unmountOnExit>
            <Typography variant="body1">
              ここには全行表示してあげよう！！！！！！！！！！！！！
              ！！！！！！！！ 自由記入欄
            </Typography>
          </Collapse>
        </CardContent>
        <div className={styles.button_wrapper}>
          <Button
            fullWidth
            onClick={handleExpandClick}
            startIcon={expanded ? <ExpandLessIcon /> : <ExpandMoreIcon />}
            className={styles.icon_button}
          >
            {expanded ? "LESS" : "MORE"}
          </Button>
        </div>
      </Card>
    </div>
  );
};

export default TextCard;

.root {
  .card {
    background-color: salmon;
  }
}

import React from "react";
// react-router-dom
import { RouteComponentProps } from "react-router-dom";
import { Link } from "react-router-dom";
import { Path } from "../../../Routes";
// material-ui
import Grid from "@material-ui/core/Grid";
// styles
import styles from "./Sample1Page.module.scss";
// components
import ProfileCard from "../../modules/cards/profileCard/ProfileCard";
import PiechartCard from "../../modules/cards/piechartCard/PiechartCard";
import ChipCard from "../../modules/cards/chipCard/ChipCard";
import TextCard from "../../modules/cards/textCard/TextCard";

type PropsTypes = RouteComponentProps;

const Sample1Page = ({ history }: PropsTypes): JSX.Element => {
  return (
    <div className={styles.root}>
      <Grid container spacing={3}>
        <Grid item xs={6}>
          <ProfileCard />
        </Grid>
        <Grid item xs={6}>
          <PiechartCard />
        </Grid>
        <Grid item xs={3}>
          <ChipCard />
        </Grid>
        <Grid item xs={3}>
          <TextCard />
        </Grid>
        <Grid item xs={3}>
          <TextCard />
        </Grid>
        <Grid item xs={3}>
          <TextCard />
        </Grid>
      </Grid>
    </div>
  );
};

export default Sample1Page;