How do I pull a DOM element's data from its sibling's child?

Profile

footer text

How do I pull a DOM element's data from its sibling's child?

I have a table where a NavLink, when clicked, should take the user inside a game room – as a player or observer, depending on whether the room is filled. My problem is that the user.id I need is in the NavLink’s uncle component – the 'creator' tag in the same row.

What’s the simplest way of fetching the data? Here’s the table I’m working with:


<table style={{border: "3px solid rgb(0, 0, 0)"}}>
      <thead>
        <tr>
          <th>Creator</th>
          <th>Opponent</th>
          <th>Status</th>
        </tr>
      </thead>
      <tbody>
        {props.games.length > 0 ? (
            props.games.map((user) => (
            <tr key={user.creator}>
                <td>{user.creator}</td>  <----TAKE THIS VALUE FROM HERE
                <td>{user.opponent ? user.opponent : "-------"}</td>
                <td>
                  <NavLink to='/Game' onClick={props.joinGame}>Join a Game</NavLink>   <----AND USE IT HERE WHEN THE USER CLICKS THE NAVLINK
                </td>
            </tr>
            ))
        ) : (
            <tr>
            <td colSpan={3}>No games</td>
            </tr>
        )}
      </tbody>
    </table>

I tried getting the key from the grandparent tag directly but I don't know how because I'm a beginner.

Comments:

2023-01-07 20:29:38

cam you explain more on this -> My problem is that the user.id I need is in the NavLink’s uncle component

2023-01-07 20:29:38

Yes, thank you. My <NavLink> is wrapped around a <td> parent but the user.id I need is in the other cel (<td>{user.creator}</td>) just under the <tr> tag

Answers(1) :

You can pass the user id in URL like below

    <table style={{border: "3px solid rgb(0, 0, 0)"}}>
      <thead>
        <tr>
          <th>Creator</th>
          <th>Opponent</th>
          <th>Status</th>
        </tr>
      </thead>
      <tbody>
        {props.games.length > 0 ? (
            props.games.map((user) => (
            <tr key={user.creator}>
                <td>{user.creator}</td>
                <td>{user.opponent ? user.opponent : "-------"}</td>
                <td>
                  <NavLink to={`/Game/${user.id}`} onClick={props.joinGame}>Join a Game</NavLink>
// or as query param as below
 <NavLink to={`/Game?user_id=${user.id}`} onClick={props.joinGame}>Join a Game</NavLink>
                </td>
            </tr>
            ))
        ) : (
            <tr>
            <td colSpan={3}>No games</td>
            </tr>
        )}
      </tbody>
    </table>

you can use {} and inside that you can write js like expression I used template string `` and passed user.id

Let me know this is what you were looking for?

Comments:

2023-01-07 20:29:38

No. So basically here's what I'm lookin to do: <tr key={user.creator}> <td>{user.creator}</td> <-------TAKE THIS VALUE FROM THIS CELL <td>{user.opponent ? user.opponent : "-------"}</td> <td> <NavLink to='/Game' onClick={props.joinGame}>Join a Game</NavLink> <-----WHEN THE USER CLICKS THIS LINK FROM THE BROWSER </td> </tr>

Questions & Answers