In a React JS application, handling table data is a common task, especially when building interactive and dynamic interfaces. You might need to get the value of a specific table row for various purposes such as updating, deleting, or displaying detailed information. In this blog post, we’ll explore how to get table row values in React JS with practical examples.
Prerequisites
Before we start, make sure you have the following:
- A basic understanding of React JS.
- Node.js and npm installed on your machine.
- A React project set up. If you don’t have one, you can create it using Create React App:
npx create-react-app table-row-value-demo
cd table-row-value-demo
npm startSteps to Get Table Row Value
Step 1: Create a Sample Table
First, let’s create a sample table with some data. We’ll use a state to manage the data and render it in a table format.
import React, { useState } from 'react';
function App() {
const [data, setData] = useState([
{ id: 1, name: 'John Doe', email: 'john.doe@example.com' },
{ id: 2, name: 'Jane Smith', email: 'jane.smith@example.com' },
{ id: 3, name: 'Bob Johnson', email: 'bob.johnson@example.com' }
]);
return (
<div className="App">
<h1>User Table</h1>
<table border="1">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Email</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
{data.map((row) => (
<tr key={row.id}>
<td>{row.id}</td>
<td>{row.name}</td>
<td>{row.email}</td>
<td>
<button onClick={() => handleRowClick(row)}>Get Row Data</button>
</td>
</tr>
))}
</tbody>
</table>
</div>
);
}
export default App;Step 2: Handle Row Click
Next, we need to handle the row click event to get the value of the clicked row. We’ll create a function handleRowClick that takes the row data as a parameter and logs it to the console.
import React, { useState } from 'react';
function App() {
const [data, setData] = useState([
{ id: 1, name: 'John Doe', email: 'john.doe@example.com' },
{ id: 2, name: 'Jane Smith', email: 'jane.smith@example.com' },
{ id: 3, name: 'Bob Johnson', email: 'bob.johnson@example.com' }
]);
const handleRowClick = (row) => {
console.log('Row data:', row);
};
return (
<div className="App">
<h1>User Table</h1>
<table border="1">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Email</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
{data.map((row) => (
<tr key={row.id}>
<td>{row.id}</td>
<td>{row.name}</td>
<td>{row.email}</td>
<td>
<button onClick={() => handleRowClick(row)}>Get Row Data</button>
</td>
</tr>
))}
</tbody>
</table>
</div>
);
}
export default App;Step 3: Display Row Data
Instead of just logging the row data to the console, you might want to display it somewhere in your component. We’ll add a state variable to hold the selected row data and display it below the table.
import React, { useState } from 'react';
function App() {
const [data, setData] = useState([
{ id: 1, name: 'John Doe', email: 'john.doe@example.com' },
{ id: 2, name: 'Jane Smith', email: 'jane.smith@example.com' },
{ id: 3, name: 'Bob Johnson', email: 'bob.johnson@example.com' }
]);
const [selectedRow, setSelectedRow] = useState(null);
const handleRowClick = (row) => {
setSelectedRow(row);
};
return (
<div className="App">
<h1>User Table</h1>
<table border="1">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Email</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
{data.map((row) => (
<tr key={row.id}>
<td>{row.id}</td>
<td>{row.name}</td>
<td>{row.email}</td>
<td>
<button onClick={() => handleRowClick(row)}>Get Row Data</button>
</td>
</tr>
))}
</tbody>
</table>
{selectedRow && (
<div>
<h2>Selected Row Data</h2>
<p>ID: {selectedRow.id}</p>
<p>Name: {selectedRow.name}</p>
<p>Email: {selectedRow.email}</p>
</div>
)}
</div>
);
}
export default App;Conclusion
Getting the value of a table row in React JS involves setting up a table, handling row click events, and managing the state to display the selected row’s data. By following these steps, you can effectively interact with table data and enhance your React application’s interactivity.
Feel free to customize the example to suit your specific use case, such as performing operations like updating or deleting the selected row. Happy coding!
English