◾️はじめに

React で ダイアログ表示において
コンポーネント間のデータの受け渡しをする際に
props / state を学んだのでメモ

【１】props

* 親コンポーネントから子コンポーネントへの
　データ受け渡す際のインターフェース

cf. props = プロパティ(Propaties)の略

【２】state

* コンポーネント自体の状態

１）使用上の注意

* state を持っているのは、親コンポーネント
* 子コンポーネントは、stateを直接変更できない
 => 子コンポーネントから変更したい場合、props経由で変更を依頼する

２）useState

* React に「状態（state）」を作ってもらう命令
 => 詳細は、以下の関連記事を参照のこと

React Hooks ～入門編～
https://dk521123.hatenablog.com/entry/2025/10/28/233611

【３】サンプル

例１：ダイアログ表示

App.tsx

import React, { useState } from "react";
import {
 Button, Dialog, DialogTitle, DialogContent, DialogActions
} from "@mui/material";

function App() {
  // 状態の管理 (開閉状態を管理する state)
  const [open, setOpen] = useState(false);

  // ダイアログを開く処理 = setOpen(true)
  const handleOpen = () => setOpen(true);

  // ダイアログを閉じる処理 = setOpen(false)
  const handleClose = () => setOpen(false);

  return (
    <div style={{ textAlign: "center", marginTop: "50px" }}>
      <Button variant="contained" color="primary" onClick={handleOpen}>
        ダイアログを開く
      </Button>

      // <Dialog open={open}> = ダイアログ表示制御
      //  open に true/false を渡して制御する
      <Dialog open={open} onClose={handleClose}>
        <DialogTitle>タイトル</DialogTitle>
        <DialogContent>
          <p>ここに内容を書きます。</p>
        </DialogContent>
        <DialogActions>
          <Button onClick={handleClose}>閉じる</Button>
        </DialogActions>
      </Dialog>
    </div>
  );
}

export default App;

例２：ダイアログを別コンポーネントに分ける場合

App.tsx (親コンポーネント)

import React, { useState } from "react";
import { Button } from "@mui/material";
import { MyDialog } from "./MyDialog";

export default function App() {
  // 親コンポーネントでStateを管理
  const [open, setOpen] = useState(false);

  return (
    <>
      <Button variant="contained" onClick={() => setOpen(true)}>
        ダイアログを開く
      </Button>
      <MyDialog open={open} onClose={() => setOpen(false)} />
    </>
  );
}

MyDialog.tsx (子コンポーネント)

import React from "react";
import {
 Dialog, DialogTitle, DialogContent, DialogActions, Button
} from "@mui/material";

// ★ propsを定義
type Props = {
  // Openかどうかの状態を定義
  open: boolean;
  // onCloseイベントを定義
  // 目的：このダイアログを閉じるための関数を親から受け取るため
  onClose: () => void;
};

export const MyDialog: React.FC<Props> = ({ open, onClose }) => {
  return (
    <Dialog open={open} onClose={onClose}>
      <DialogTitle>My Dialog</DialogTitle>
      <DialogContent>内容を書く場所です。</DialogContent>
      <DialogActions>
        <Button onClick={onClose}>閉じる</Button>
      </DialogActions>
    </Dialog>
  );
};