Getting an object from a table row in React

Question

I'm a beginner working on a simple CRUD, and all I want to do is get the user from the selected row. If you look below:

      {/* ANCHOR - TABLE ROWS */}
      {admins.map((user, index) => (
          <tbody key={index}>

            <tr>
              <td style={{fontWeight: 'bold'}}>{user._id}</td>
              <td>{shortenStr(user.username)}</td>
              <td>{shortenStr(user.firstName)}</td>
              <td>{shortenStr(user.lastName)}</td>
              <td>{shortenStr(user.dob)}</td>
              <td>

                <div className="button-div">
                  <button id="updateUser" 
                  className="button-update-admin" 
                  onClick={handleClick && console.log(user.firstName)}>
                  </button>
                </div>

              </td>
            </tr>

            </tbody>
      ))}

Console.log gives me the first names of every user in the table, such as:

John
Steve
Frank

Ideally I would like to pass the user Data into my handle click function so that I can create a context, perhaps. Any help is appreciated, thanks!

what does handleClick do?

wick3d
– wick3d

2022-06-02 17:43:02 +00:00
Commented Jun 2, 2022 at 17:43 — wick3d
– wick3d, Commented Jun 2, 2022 at 17:43
onClick={handleClick(user.firstName)}?

super
– super

2022-06-02 18:21:05 +00:00
Commented Jun 2, 2022 at 18:21 — super
– super, Commented Jun 2, 2022 at 18:21

A G · Accepted Answer · 2022-06-02 19:56:02Z

4

Please change -

onClick={handleClick && console.log(user.firstName)}>

To

onClick={() => {
  console.log(user.firstName)
}}

Or if you want to have a separate onClick function with the event data -

function handleClick(event, user) {
    console.log(user.firstName);
}
...
onClick={(event) => handleClick(event, user)}

edited Jun 2, 2022 at 19:56

answered Jun 2, 2022 at 18:03

A G

22.9k12 gold badges94 silver badges114 bronze badges

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

2 Comments

jmsapps Over a year ago

How do I pass a parameter into an onClick function if I have an event, such as: const handleClick = (event: MouseEvent, firstName: string) => {}. In other words how do I pass the event as an argument? For example: onClick={handleClick(event, user.firstName)} this doesnt work, and removing the event gives me an error: Expected 2 arguments, got 1

A G Over a year ago

You can pass the event as onClick={(event) => handleClick(event, user)}. I have updated the answer & codesandbox.

Collectives™ on Stack Overflow

Getting an object from a table row in React

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related