How to access row's data via onClick in <td> element?

Question

In the below shown Users.jsx file I am populating a table with the data stored in the userList array. I have implemented an onClick listener in a table data cell element, I want the Trigger function to be called with the clicked row's info object. Or I want to be able to access the clicked row's data in the Trigger function.

import React from 'react';
import '../../node_modules/bootstrap/dist/css/bootstrap.min.css'
import Navbar from "../components/NavBar";
import { Table } from 'react-bootstrap';

function Users() {

  let userList = [
    {'name': 'Jack',
    'age': 21,
    'role': 'Customer',
    },
    {'name': 'Tom',
    'age': 22,
    'role': 'Product Manager',
   }]

   const Trigger = () => {
     // Here
   }
  
  const UserData = userList.map(
    (info)=>{
      return(
          <tr>
          <td>{info.name}</td>
          <td>{info.age}</td>
          <td>{info.role}</td>
          <td onClick={Trigger}> Visit Profile  </td>
        </tr>
      )
    }
  )

  return(
    <div>
      <Navbar/>
      <div>
        <div className="row">
          <div className="col-md-8 offset-md-2">
            <Table striped bordered hover responsive="md">
                <thead>
                    <tr>
                    <th>NAME</th>
                    <th>AGE</th>
                    <th>ROLE</th>
                    <th>PROFILE</th>
                    </tr>
                </thead>
                <tbody>
                    {UserData}                    
                </tbody>
            </Table>
            </div>
            </div>
      </div>
    </div>
  )

}

export default Users;

Any help with a solution or recommendation to documentation for (event handlers needed in this context) will be much appreciated.

Jenya.S · Accepted Answer · 2022-02-02 19:42:58Z

2

An arrow function call would do the job:

   let userList = [
    {'key': 1,
    'name': 'Jack',
    'age': 21,
    'role': 'Customer',
    },
    {'key': 2,
    'name': 'Tom',
    'age': 22,
    'role': 'Product Manager',
   }]

   const Trigger = (info) => {
     // Here
     console.log(`Name is: ${info.name}, Age: ${info.age}, Role: ${info.role}`)
   }
  
  const UserData = userList.map(
    (info)=>{
      return(
          <tr key={info.key}>
          <td>{info.name}</td>
          <td>{info.age}</td>
          <td>{info.role}</td>
          <td onClick={() => Trigger(info)}> Visit Profile  </td>
        </tr>
      )
    }
  )

P.S I've added keys to the list to avoid warnings..

answered Feb 2, 2022 at 19:42

Jenya.S

462 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Andrii Svirskyi · Accepted Answer · 2022-02-02 19:25:25Z

1

function Users() {

  let userList = [
    {'name': 'Jack',
    'age': 21,
    'role': 'Customer',
    },
    {'name': 'Tom',
    'age': 22,
    'role': 'Product Manager',
   }]

   const Trigger = (info) => {
    // info it's user obj
   }
  
  const UserData = userList.map(
    (info)=>{
      return(
          <tr>
          <td>{info.name}</td>
          <td>{info.age}</td>
          <td>{info.role}</td>
          <td onClick={()=>{Trigger(info)}}> Visit Profile  </td>
        </tr>
      )
    }
  )

  return(
    <div>
      <Navbar/>
      <div>
        <div className="row">
          <div className="col-md-8 offset-md-2">
            <Table striped bordered hover responsive="md">
                <thead>
                    <tr>
                    <th>NAME</th>
                    <th>AGE</th>
                    <th>ROLE</th>
                    <th>PROFILE</th>
                    </tr>
                </thead>
                <tbody>
                    {UserData}                    
                </tbody>
            </Table>
            </div>
            </div>
      </div>
    </div>
  )

}

export default Users;

answered Feb 2, 2022 at 19:25

Andrii Svirskyi

3761 silver badge4 bronze badges

1 Comment

isherwood Over a year ago

Some explanation of your solution would make this answer better. See How to Answer.

Collectives™ on Stack Overflow

How to access row's data via onClick in <td> element?

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related