在React js中将鼠标悬停在表格数据上显示图标

Question

当我将鼠标悬停在react js中的特定数据行上时如何显示复选框和删除之类的图标？

在下面的代码中，我使用了简单的html行作为复选框，并使用了删除图标，并使用了材料UI图标。因此，当我将鼠标悬停在其上时，这两个图标应会显示。

class Data extends Component {
    constructor(props) {
     super(props);
    this.state = {
      selected: null
    }
    }
    render () {

    return
    (
    <div classname="container">
    <table>
    <th>Name</th>
    <th>Created</th>
    <th>Updated</th>
    <tr>
    <input type="checkbox"/>
   <DeleteOutlinedIcon/>
    <td>Folder1</td>
    <td>12th May 2019></td>
    <td>13th May 2019></td
    </tr>
    </table>

    </div>
    );
    }
    }

    export default Data;