I'm a newbie with MaterialUI therefore apologies if the question is too simple to solve. I'm pulling some data, showing on a table, with an additional column that has a button attached:
<TableCell>
{<IconButton> <ClearIcon /> </IconButton>}
</TableCell>
I want to add an onClick trigger to the IconButton. However, because the IconButton is nested inside the TableCell the trigger is not reachable. Simply because TableCell is overlapping the button.
When I add onClick to TableCell it works, however it is not a best practice. Thus, when the user clicks around the button it still triggers the onClick.
Any suggestion on how to overcome this issue? I also share the overlap view of TableCell in real time.
I think you can add an onClick on the IconButton and then create a function to trigger it, I give you a code example you can try.
<TableCell>
<IconButton onClick={() => deleteData()}>
<ClearIcon />
</IconButton>
</TableCell>