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?
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"))
}