{"id":203205,"date":"2024-03-14T16:52:18","date_gmt":"2024-03-14T16:52:18","guid":{"rendered":"https:\/\/namso-gen.co\/blog\/how-to-get-table-row-value-in-react-js\/"},"modified":"2024-03-14T16:52:18","modified_gmt":"2024-03-14T16:52:18","slug":"how-to-get-table-row-value-in-react-js","status":"publish","type":"post","link":"https:\/\/namso-gen.co\/blog\/how-to-get-table-row-value-in-react-js\/","title":{"rendered":"How to get table row value in React JS?"},"content":{"rendered":"

**To get the value of a table row in React JS, you can listen for click events on the table rows and access the data that you need. You can do this by setting up an onClick event handler on the table row element and getting the value from the event object.**<\/p>\n

Here’s an example of how you can achieve this:<\/p>\n

“`
\nimport React from ‘react’;<\/p>\n

class Table extends React.Component {
\n handleClick = (event) => {
\n const value = event.target.textContent;
\n console.log(value);
\n }<\/p>\n

render() {
\n return (<\/p>\n<\/p>\n<\/p>\n<\/p>\n<\/p>\n
Row 1, Cell 1<\/td>\n

<\/p>\n

Row 1, Cell 2<\/td>\n

\n <\/tr>\n

<\/p>\n

Row 2, Cell 1<\/td>\n

<\/p>\n

Row 2, Cell 2<\/td>\n

\n <\/tr>\n

\n <\/tbody>\n

\n <\/table>\n

\n );
\n }
\n}<\/p>\n

export default Table;
\n“`<\/p>\n

In this example, we have a `Table` component that renders a simple table with two rows. Each row has two cells, and we have added an `onClick` event handler to the `tr` element. Inside the `handleClick` method, we access the text content of the clicked element using `event.target.textContent`.<\/p>\n

This way, you can get the value of the table row in React JS.<\/p>\n

\n
\n

Table of Contents<\/p>\nToggle<\/span><\/path><\/svg><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n