title: Using Buttons in React Material UI Table
body: <p>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?</p>
  
  <pre><code>render() {
    var deleteIcon =
    (&lt;IconButton onClick={console.log("delete")}&gt;
      &lt;DeleteIcon color="secondary" /&gt;
    &lt;/IconButton&gt;
    );
  
    const editIcon = (
      &lt;IconButton onClick={console.log("edited")}&gt;
        &lt;EditIcon color="primary" /&gt;
      &lt;/IconButton&gt;
    );
  
  return(
    &lt;TableBody&gt;
     {this.state.serviceData.map(n =&gt; {
      return (
       &lt;TableRow key={n.id}&gt;
        &lt;TableCell style={styles.editor} component="th" scope="row"&gt;
          {deleteIcon}
          {editIcon}
        &lt;/TableCell&gt;
       &lt;TableCell&gt;{n.domain}&lt;/TableCell&gt;
     &lt;TableCell&gt;{n.service_name}&lt;/TableCell&gt;
    &lt;/TableCell&gt;
   &lt;/TableRow&gt;
  )};
  </code></pre>
  
  <p>And my result is : 
  <a href="https://i.stack.imgur.com/cDnD7.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/cDnD7.png" alt="Image showing my table"></a></p>