React Material-UI コンポーネントのprops操作

Question

前提

Material-UIのコンポーネントにデフォルトで用意されているpropsにアクセスしたい

実現したいこと

下記サイトのBasic accordionのコードをコピーしただけのアコーディオンがあります。
https://mui.com/material-ui/react-accordion/

アコーディオン内をクリックすることでタブの開閉を行う仕様です。
これを自分で用意したボタンを押したときにも開閉できるようにしたいです。

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

下記サイトにアコーディオンコンポーネントのprops一覧があります。
https://mui.com/material-ui/api/accordion/

一覧にあるexpandedへアクセスできれば実装ができると思っております。

該当のソースコード

import * as React from 'react';
import Accordion from '@mui/material/Accordion';
import AccordionSummary from '@mui/material/AccordionSummary';
import AccordionDetails from '@mui/material/AccordionDetails';
import Typography from '@mui/material/Typography';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';

export default function SimpleAccordion() {

const click()=>{
// ここでexpandedの値を操作したい
}

  return (
    <div>
      <Accordion>
        <AccordionSummary
          expandIcon={<ExpandMoreIcon />}
          aria-controls="panel1a-content"
          id="panel1a-header"
        >
          <Typography>Accordion 1</Typography>
        </AccordionSummary>
        <AccordionDetails>
          <Typography>
アコーディオン
          </Typography>
        </AccordionDetails>
      </Accordion>

<br />
<br />
<button onClick={click}>閉じる</button>
    </div>
  );
}

試したこと

コンポーネントのスタイルの変更方法などは記事がありましたが
コンポーネントの外でpropsを操作する方法がわかりませんでした。

補足情報（FW/ツールのバージョンなど）

Material-UIのスタイルではなく、デフォルトの挙動を変更することは可能なのでしょうか。

よろしくお願いいたします。

Answer 1

こんなんでどうでしょう

import * as React from "react";
import Accordion from "@mui/material/Accordion";
import AccordionSummary from "@mui/material/AccordionSummary";
import AccordionDetails from "@mui/material/AccordionDetails";
import Typography from "@mui/material/Typography";
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";

export default function SimpleAccordion() {
  const [expanded, setExpanded] = React.useState(true);
  const click = () => {
    setExpanded(false);
  };
  const handleChange = (event, newValue) => {
    setExpanded(newValue);
  };

  return (
    <div>
      <Accordion expanded={expanded} onChange={handleChange}>
        <AccordionSummary
          expandIcon={<ExpandMoreIcon />}
          aria-controls="panel1a-content"
          id="panel1a-header"
        >
          <Typography>Accordion 1</Typography>
        </AccordionSummary>
        <AccordionDetails>
          <Typography>アコーディオン</Typography>
        </AccordionDetails>
      </Accordion>
      <br />
      <br />
      <button onClick={click}>閉じる</button>
    </div>
  );
}

Comments

[shunta80]

実装できました。ありがとうございました！