I am having problem when adding a working update button inside material ui datagrid v5.6.1

user_17375720 0
Viewed 43

I am trying to add a button inside my material ui datagrid row.

My datagrid component

<DataGrid
    rows={adminStorage}
    columns={columns}
    autoPageSize
    getRowId={(logistics) => logistics._id }
    autoHeight
    headerHeight={60}
    pageSize={100}
    className={classes.root}
/>

the column

    {
        ...
        field: "update",
        align:"left",
        headerAlign: "left",
        headerName: "Update",
        renderCell: (cellValues) => {
            return (
                <Button pL={2} onClick={updateHandler} variant="contained" color="primary">
                    update
                </Button>
            )
        }
    },

the update handler

const updateHandler = (cellvalues) => {
     console.log("The data botained fron the handler is", cellvalues)
}

I want it to work in such a way that when the button is clicked it links to another page that has edit form as well as getting that specific row object and its id

What should i do?

mui-datatable material-ui reactjs javascript
1 Answers

React is still javascript, according to react https://reactjs.org/docs/handling-events.html#passing-arguments-to-event-handlers you can

<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>
<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>

In both cases, the e argument representing the React event will be passed as a second argument after the ID. With an arrow function, we have to pass it explicitly, but with bind, any further arguments are automatically forwarded.

You can also retrieve further data from the clicked element by using the passed event and the target attribute like

const updateHandler = (event) => {
     let element = event.target;

     console.log("The data botained fron the handler is", element.getAttribute("attribute"))
}
user_59565890
Related