I need assistance. I have a table that holds user data and I want to create a functionality where clicking on the edit button opens a dialogue box with a form pre-filled with the user's initial data. However, I'm currently only able to pass the user's id instead of the entire object.

Here is the link to view my full code on codesandbox.

User.js is the main file where I am encountering this issue.

import React, { useState, useEffect } from "react";
import { Button, Grid, Typography, Box } from "@material-ui/core";
import { DataGrid } from "@material-ui/data-grid";
import { useStyles } from "./UsersStyle";
import TextField from "@material-ui/core/TextField";
import Dialog from "@material-ui/core/Dialog";
import DialogActions from "@material-ui/core/DialogActions";
import DialogContent from "@material-ui/core/DialogContent";
import DialogContentText from "@material-ui/core/DialogContentText";
import DialogTitle from "@material-ui/core/DialogTitle";

const customerData = [
  { id: 1, name: "Customer 1", gender: "Male", email: "[email protected]" },
  { id: 2, name: "Customer 2", gender: "Male", email: "[email protected]" },
  { id: 3, name: "Customer 3", gender: "Female", email: "[email protected]" }
];

const Users = () => {
  const classes = useStyles();
  const [customers, setCustomers] = React.useState(customerData);
  const [editOpen, setEditOpen] = React.useState(false);
  const [name, setName] = React.useState("");
  const [gender, setGender] = React.useState("");
  const [email, setEmail] = React.useState("");
  let initialFormData = { id: null, name: "", gender: "", email: "" };
  const [currentCustomer, setCurrentCustomer] = React.useState(initialFormData);

  // initial data I am passing to customer state
  const columns = [
    { field: "id", headerName: "ID", width: 70 },
    { field: "name", headerName: "Name", width: 200 },
    {
      field: "gender",
      headerName: "Gender",
      width: 150
    },
    {
      field: "email",
      headerName: "Email",
      description: "This column has a value getter and is not sortable.",
      width: 250
    },
    {
      field: "action",
      headerName: "Action",
      width: 250,

      // Important: passing customers state so I can edit each user
      renderCell: (customers) => (
        <>
          <Button
            style={{
              backgroundColor: "#ffcc00",
              marginRight: 40,
              padding: "3px 35px"
            }}
            variant="contained"
            color="primary"
            type="submit"
            onClick={() => handleEditOpen(customers)}
          >
            Edit
          </Button>
          
          {/* when I click on edit button this dialogue will appear */}
          <Dialog
            disableBackdropClick
            open={editOpen}
            onClose={handleEditClose}
            aria-labelledby="form-dialog-title"
          >
            <DialogTitle id="form-dialog-title">Edit Customer</DialogTitle>

            {/* I want this form to have data of the user which has been clicked */}
            <form
              noValidate
              /* onSubmit={() => handleSubmit(id)} */
            >
              <DialogContent>
                <TextField
                  value={currentCustomer.name}
                  onChange={(event) => setName(event.target.value)}
                  autoFocus
                  margin="dense"
                  id="name"
                  label="Name"
                  type="text"
                  fullWidth
                />
                <TextField
                  value={currentCustomer.gender}
                  onChange={(event) => setGender(event.target.value)}
                  margin="dense"
                  id="gender"
                  label="Gender"
                  type="text"
                  fullWidth
                />
                <TextField
                  value={currentCustomer.email}
                  onChange={(event) => setEmail(event.target.value)}
                  margin="dense"
                  id="email"
                  label="Email Address"
                  type="email"
                  fullWidth
                />
              </DialogContent>
              <DialogActions>
                <Button onClick={handleEditClose} color="primary">
                  Cancel
                </Button>
                <Button onClick={handleEditClose} color="primary" type="submit">
                  Add
                </Button>
              </DialogActions>
            </form>
          </Dialog>
        </>
      )
    }
  ];

  const handleSubmit = (clickedUser) => {
    //some update will go
  };

  const handleEditOpen = (clickedUser) => {
    console.log(clickedUser);
    setEditOpen(true);
    setCurrentCustomer({
      id: clickedUser.id,
      name: clickedUser.name,
      gender: clickedUser.gender,
      email: clickedUser.email
    });
    console.log(currentCustomer);
  };

  const handleEditClose = () => {
    setEditOpen(false);
  };

  return (
    <div className={classes.customerList}>
      <DataGrid
        rows={customers}
        columns={columns}
        pageSize={5}
        checkboxSelection={false}
        disableSelectionOnClick={true}
      />
    </div>
  );
};

export default Users;