I have made a table using Material UI where I have two buttons in the first column of every row. I wish to edit/delete rows on clicking these but Im stuck on logic. Is it even possible with my implementation ? If not then what's the preferred way of doing so?
render() {
var deleteIcon =
(<IconButton onClick={console.log("delete")}>
<DeleteIcon color="secondary" />
</IconButton>
);
const editIcon = (
<IconButton onClick={console.log("edited")}>
<EditIcon color="primary" />
</IconButton>
);
return(
<TableBody>
{this.state.serviceData.map(n => {
return (
<TableRow key={n.id}>
<TableCell style={styles.editor} component="th" scope="row">
{deleteIcon}
{editIcon}
</TableCell>
<TableCell>{n.domain}</TableCell>
<TableCell>{n.service_name}</TableCell>
</TableCell>
</TableRow>
)};
And my result is :

Building on @st4rl00rd's comment, I was able to tie the buttons using :
const editIcon = (
<IconButton onClick={this.editItem}>
<EditIcon color="primary" />
</IconButton>
);
and binding them in the constructor. I was able to get the selected row data by doing :
<TableBody>
{this.state.serviceData.map(n => {
return (
<TableRow key={n.id} onClick={this.getData.bind(this,n)}>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With