addeventlistener in querySelectorAll in Reactjs

Question

Fala galera

Maybe it’s a simple problem but I’m trying to figure out why it doesn’t work, I researched here in the stack, I found similar questions but they didn’t solve the problem.

I have a dynamically mounted table according to the API

I need to get the TR (parent) ID of the TD element I clicked.

Problem:

• It only works after the second click
• After the third click, the item is printed repeatedly on the console

It seems that it is printed the amount of times it has already been clicked.

Tbody

                              <Tbody>
                                    {address.map((index) => {

                                          let tipoPessoa = ''
                                          if (index.tipoPessoa === 1) {
                                                tipoPessoa = 'Física'
                                          }
                                          else {
                                                tipoPessoa = 'Jurídica'
                                          }

                                          return <Tr id={index.id} key={index.id} className='tr'>
                                                <Td>{index.nome}</Td>
                                                <Td>{index.endereco.cidade}</Td>
                                                <Td>{tipoPessoa}</Td>
                                                <Td onClick={detailsAddress}><Icon src={Search} /></Td>
                                          </Tr>
                                    })}
                              </Tbody>

Function to capture ID

      const detailsAddress = () => {
      
            const trs = document.querySelectorAll('.tr')
            trs.forEach((tr)=>{
                  tr.addEventListener('click', ()=>{
                        console.log(tr)
                  })
            })
      }

Console

Answer 1

In this case as you have already assigned your function detailsAddress in the event of onClick of his td you can use it to navigate to the parent element, in case the tr, for this just make the following change in its function:

const detailsAddress = (event) => {
      const tdElement = event.target
      const trElement = tdElement.parentElement
      
      console.log(trElement.id)
}

You can simplify things by doing everything in one line:

const detailsAddress = (event) => {
      console.log(event.target.parentElement.id)
}

Another approach would be to pass the id directly to your function:

<Td onClick={() => detailsAddress(index.id)}><Icon src={Search} /></Td>

Then it would be enough to recover that value:

const detailsAddress = (id) => {
   console.log(id)
}