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 :