CODEWITHSUNDEEP
reactjsreact-nativematerial-ui
Vithursa Mahendrarajah
Vithursa Mahendrarajah

Reputation: 1224

Onclick function for material ui tablecell in react

I have a requirement to show popovers, when clicking on table cell (used Material UI table cell). Tried adding onclick function to cell, but not able to pass the element value to the function. How can I achieve this? Below is the code snippet which used to render table.

<TableBody>
 {dataObject.map((data) => (
    <TableRow key={data.id}>
    <TableCell>
        <Button>
            {data.info}
        </Button>
    </TableCell>
    <TableCell>
        {data.request}
    </TableCell>
    </TableRow>
))}
</TableBody>

Thanks in advance.

Upvotes: 2

Views: 11467

Answers (1)

Dekel
Dekel

Reputation: 62676

The <TableCell> component is eventually a td/th in your html, so you don't really have a value attached to it (it's not like a pure react component that you can just use value, or an input element that has value that you can access).

What you can do is access the element's innerHTML / textContent to access the content of the cell using the event itself:

const handleCellClick = (e) => {
    console.log(e.target.textContent);
}

<TableCell onClick={handleCellClick}>{data.request}</TableCell>

Upvotes: 8

Related Questions