During on click on Ok button in material UI dialog, Email and Id getting undefined. I would like to pass Id and email to the submitData function. I am able to get data in the openDialog ,but unable to pass to submitData. Can someone please advise.? Added my CSB link:

https://codesandbox.io/s/zealous-feather-m5zd39?file=/src/App.js:0-1940

import { useState, useEffect } from "react";
import "./styles.css";
import {
  Button,
  Dialog,
  DialogActions,
  DialogContent,
  DialogTitle
} from "@material-ui/core";

const data = [
  {
    id: 1,
    name: "Test1",
    email: "[email protected]"
  },
  {
    id: 2,
    name: "Test2",
    email: "[email protected]"
  }
];

const MyDialog = ({ open, handleClose, submitData, title, children }) => {
  return (
    <Dialog open={open} onClose={handleClose}>
      <DialogTitle>{title}</DialogTitle>
      <DialogContent>{children}</DialogContent>
      <DialogActions>
        <Button onClick={submitData} color="primary">
          Ok
        </Button>
        <Button onClick={handleClose} color="primary">
          Close
        </Button>
      </DialogActions>
    </Dialog>
  );
};

const useDialog = () => {
  const [open, setOpen] = useState(false);
  const openDialog = (id, email) => {
    //console.log(id, email);
    setOpen(true);
  };
  const handleClose = () => {
    setOpen(false);
  };

  const submitData = (id, email) => {
    // post method to submit data:
    console.log(id, email);
    setOpen(false);
  };
  const props = {
    open,
    handleClose,
    submitData
  };
  return [openDialog, props];
};
export default function App() {
  const [openDialog, dialogProps] = useDialog();
  const [players, setPlayers] = useState([]);
  useEffect(() => {
    setPlayers(data);
  }, []);
  return (
    <div className="App">
      <div className="players">
        {players.map(({ id, name, email }) => (
          <div key={id} className="row">
            <div>
              <div className="name" onClick={(e) => openDialog(id, email)}>
                {name}
              </div>
            </div>
            <div>
              <div className="email">{email}</div>
            </div>
          </div>
        ))}
      </div>
      <MyDialog {...dialogProps} title="Confirm Player"></MyDialog>
    </div>
  );
}

CodePudding user response：

can you try this

import { useState, useEffect } from "react";
import "./styles.css";
import {
  Button,
  Dialog,
  DialogActions,
  DialogContent,
  DialogTitle
} from "@material-ui/core";

const data = [
  {
    id: 1,
    name: "Test1",
    email: "[email protected]"
  },
  {
    id: 2,
    name: "Test2",
    email: "[email protected]"
  }
];

const MyDialog = ({ open, handleClose, submitData, title, children }) => {
  return (
    <Dialog open={open} onClose={handleClose}>
      <DialogTitle>{title}</DialogTitle>
      <DialogContent>{children}</DialogContent>
      <DialogActions>
        <Button onClick={submitData} color="primary">
          Ok
        </Button>
        <Button onClick={handleClose} color="primary">
          Close
        </Button>
      </DialogActions>
    </Dialog>
  );
};

const useDialog = () => {
  const [open, setOpen] = useState(false);
  const [dataIndex,setDataIndex]=useState('')
  const openDialog = (index) => {
   
    setDataIndex(index)
    setOpen(true);
  };
  
  const handleClose = () => {
    setOpen(false);
  };

  const submitData = () => {
    // post method to submit data:
    console.log(data[dataIndex])
    setOpen(false);
  };
  const props = {
    open,
    handleClose,
    submitData
  };
  return [openDialog, props];
};
export default function App() {
  const [openDialog, dialogProps] = useDialog();
  const [players, setPlayers] = useState([]);
  useEffect(() => {
    setPlayers(data);
  }, []);
  return (
    <div className="App">
      <div className="players">
        {players.map(({ id, name, email },index) => (
          <div key={id} className="row">
            <div>
              <div className="name" onClick={(e) => openDialog(index)}>
                {name}
              </div>
            </div>
            <div>
              <div className="email">{email}</div>
            </div>
          </div>
        ))}
      </div>
      <MyDialog {...dialogProps} title="Confirm Player"></MyDialog>
    </div>
  );
}