javascripthtmlreactjsmaterial-uijsx

How to popup filled dialog on mui table row click?

When I click on a Material UI table row, I want the info of that row to appear in a dialog. I can't find a demo anywhere.

Here's a link to a sandbox I created showing what I mean. Click on a row to see an empty dialog popup. I need it pre-populated.

https://codesandbox.io/p/sandbox/2gzskt

I'd appreciate any suggestions.

Solution

  • You could do following:

    In handleOpen() add setDessert(value) like following:

    const handleOpen = (dessertValue) => {
  setOpen(true);
  setDessert(dessertValue);
};

    and for your <table> change following:

    <tbody>
  <tr onClick={() => handleOpen('Frozen Yogurt')}> <!-- or any other value -->
    <td>Frozen yoghurt</td>
    <td>159</td>
    <td>6</td>
    <td>24</td>
    <td>4</td>
  </tr>
</tbody>

    So move the handleOpen() from the <tbody> to <tr>

    And repeat that for the other items.

    For handleClose() you could set it to '' or whatever you need