title: How do I send data from material ui datagrid Row to form input?
body: <p>Please help me. I have a table containing some user data, I want when a user clicks on the edit button my dialogue box should open with a form with the initial data of that user. But I'm not able to pass the entire object rather only the id of the user is passed.</p>
  <p>Here is the <a href="https://codesandbox.io/s/priceless-thompson-j1e03?file=/src/Users.js" rel="nofollow noreferrer">link</a> of my complete code on codesandbox.</p>
  <p><strong>User.js main file where I am having issue</strong></p>
  <pre><code>import React, { useState, useEffect } from &quot;react&quot;;
  import { Button, Grid, Typography, Box } from &quot;@material-ui/core&quot;;
  import { DataGrid } from &quot;@material-ui/data-grid&quot;;
  import { useStyles } from &quot;./UsersStyle&quot;;
  import TextField from &quot;@material-ui/core/TextField&quot;;
  import Dialog from &quot;@material-ui/core/Dialog&quot;;
  import DialogActions from &quot;@material-ui/core/DialogActions&quot;;
  import DialogContent from &quot;@material-ui/core/DialogContent&quot;;
  import DialogContentText from &quot;@material-ui/core/DialogContentText&quot;;
  import DialogTitle from &quot;@material-ui/core/DialogTitle&quot;;
  
  const customerData = [
    { id: 1, name: &quot;Customer 1&quot;, gender: &quot;Male&quot;, email: &quot;user@gmail.com&quot; },
    { id: 2, name: &quot;Customer 2&quot;, gender: &quot;Male&quot;, email: &quot;user@gmail.com&quot; },
    { id: 3, name: &quot;Customer 3&quot;, gender: &quot;Female&quot;, email: &quot;user@gmail.com&quot; }
  ];
  
  const Users = () =&gt; {
    const classes = useStyles();
    const [customers, setCustomers] = React.useState(customerData);
    const [editOpen, setEditOpen] = React.useState(false);
    const [name, setName] = React.useState(&quot;&quot;);
    const [gender, setGender] = React.useState(&quot;&quot;);
    const [email, setEmail] = React.useState(&quot;&quot;);
    let initialFormData = { id: null, name: &quot;&quot;, gender: &quot;&quot;, email: &quot;&quot; };
    const [currentCustomer, setCurrentCustomer] = React.useState(initialFormData);
  
    // initial data I am passing to customer state
    const columns = [
      { field: &quot;id&quot;, headerName: &quot;ID&quot;, width: 70 },
      { field: &quot;name&quot;, headerName: &quot;Name&quot;, width: 200 },
      {
        field: &quot;gender&quot;,
        headerName: &quot;Gender&quot;,
        width: 150
      },
      {
        field: &quot;email&quot;,
        headerName: &quot;Email&quot;,
        description: &quot;This column has a value getter and is not sortable.&quot;,
        width: 250
      },
      {
        field: &quot;action&quot;,
        headerName: &quot;Action&quot;,
        width: 250,
  
        // Important: passing customers state so I can edit each user
        renderCell: (customers) =&gt; (
          &lt;&gt;
            &lt;Button
              style={{
                backgroundColor: &quot;#ffcc00&quot;,
                marginRight: 40,
                padding: &quot;3px 35px&quot;
              }}
              variant=&quot;contained&quot;
              color=&quot;primary&quot;
              type=&quot;submit&quot;
              onClick={() =&gt; handleEditOpen(customers)}
            &gt;
              Edit
            &lt;/Button&gt;
            // when I click on edit button this dialogue will appear
            &lt;Dialog
              disableBackdropClick
              open={editOpen}
              onClose={handleEditClose}
              aria-labelledby=&quot;form-dialog-title&quot;
            &gt;
              &lt;DialogTitle id=&quot;form-dialog-title&quot;&gt;Edit Customer&lt;/DialogTitle&gt;
  // I want this form to have data of the user which has been clicked
              &lt;form
                noValidate
                // onSubmit={() =&gt; handleSubmit(id)}
              &gt;
                &lt;DialogContent&gt;
                  &lt;TextField
                    value={currentCustomer.name}
                    onChange={(event) =&gt; setName(event.target.value)}
                    autoFocus
                    margin=&quot;dense&quot;
                    id=&quot;name&quot;
                    label=&quot;Name&quot;
                    type=&quot;text&quot;
                    fullWidth
                  /&gt;
                  &lt;TextField
                    value={currentCustomer.gender}
                    onChange={(event) =&gt; setGender(event.target.value)}
                    margin=&quot;dense&quot;
                    id=&quot;gender&quot;
                    label=&quot;Gender&quot;
                    type=&quot;text&quot;
                    fullWidth
                  /&gt;
                  &lt;TextField
                    value={currentCustomer.email}
                    onChange={(event) =&gt; setEmail(event.target.value)}
                    margin=&quot;dense&quot;
                    id=&quot;email&quot;
                    label=&quot;Email Address&quot;
                    type=&quot;email&quot;
                    fullWidth
                  /&gt;
                &lt;/DialogContent&gt;
                &lt;DialogActions&gt;
                  &lt;Button onClick={handleEditClose} color=&quot;primary&quot;&gt;
                    Cancel
                  &lt;/Button&gt;
                  &lt;Button onClick={handleEditClose} color=&quot;primary&quot; type=&quot;submit&quot;&gt;
                    Add
                  &lt;/Button&gt;
                &lt;/DialogActions&gt;
              &lt;/form&gt;
            &lt;/Dialog&gt;
          &lt;/&gt;
        )
      }
    ];
  
    const handleSubmit = (clickedUser) =&gt; {
      //some update will go
    };
  
    const handleEditOpen = (clickedUser) =&gt; {
      console.log(clickedUser);
      setEditOpen(true);
      setCurrentCustomer({
        id: clickedUser.id,
        name: clickedUser.name,
        gender: clickedUser.gender,
        email: clickedUser.email
      });
      console.log(currentCustomer);
    };
  
    const handleEditClose = () =&gt; {
      setEditOpen(false);
    };
  
    return (
      &lt;div className={classes.customerList}&gt;
        &lt;DataGrid
          rows={customers}
          columns={columns}
          pageSize={5}
          checkboxSelection={false}
          disableSelectionOnClick={true}
        /&gt;
      &lt;/div&gt;
    );
  };
  
  export default Users;
  
  </code></pre>