React: e.target.getAttribute ("id") works 20% of the time?

Question

I'm new to React and been trying to fix this for hours. I'm trying to get the id of the button which is clicked But this only gets the id around 20% of the time and the rest it returns nulltext. I have no idea what else to do. I have tried different binding methods but haven't been able to make it work.

I simplified the code here and put it below.

import React, { Component } from 'react';
import PropTypes from 'prop-types';
      
class Popupright extends React.Component {

popupnewshow = (e) => {
let ids = e.target.getAttribute("id") + "text";
console.log(ids)
let elements = document.getElementsByClassName('poprighttext showtext');
while(elements.length > 0){
  elements[0].classList.remove('showtext');
};
  document.getElementById(ids).classList.toggle("showtext");
};

render() {
  return (
    <div>
       <table className="table-bordered">
         <tbody>
          <tr className="table-samewidth">
            <td className="td-general"><button className="popup" id="xxx" onClick={this.popupnewshow}><div className="popuptitle">xxx</div></button></td>
          </tr>
          <tr className="table-samewidth">
            <td className="td-general"><button className="popup" id="yyy" onClick={this.popupnewshow}><div className="popuptitle">yyy</div></button></td>
          </tr>
          <tr className="table-samewidth">
            <td className="td-general"><button className="popup" id="zzz" onClick={this.popupnewshow}><div className="popuptitle">zzz</div></button></td>
          </tr>
        </tbody>
      </table>

      <div id="xxxtext" className="poprighttext">
          <p>xxx.</p>
      </div>
      <div id="yyytext" className="poprighttext">
          <p>yyy</p>
      </div>
      <div id="zzztext" className="poprighttext">
          <p>zzz</p>
      </div>
    </div>
  );
 }
}

export default Popupright;

Console Image: The buttons should give the id xxxtext, yyytext or zzztext depending on the button clicked but this only works 20% of the time. The rest it returns nulltext and after some clicks it returns again the proper id:

Answer 1

Using e.currentTarget.id should solve your issue.

e.target holds the element that you clicked on, but e.currentTarget will hold the element where you have bind the handler.

When you use e.currentTarget:

<button className="popup" id="xxx" onClick={this.popupnewshow}>
   <div className="popuptitle">xxx</div><!-- clicking on here: 
    e.currentTarget.id is xxx -->
</button>

When you use e.target:

<button className="popup" id="xxx" onClick={this.popupnewshow}>
   <div className="popuptitle">xxx</div><!-- clicking on here: 
    there's no id here (the clicked element id) -->
</button>

Answer 2

In general better to avoid direct DOM manipulation like remove. Also you can get the id directly rather than from the event:

const toggleItem = (arrayOfObjects, objectId) => {
  //some implementation of toggle object's vislble prop based on id property in array 
}

class Popupright extends React.Component {

  state = {
    popups: [
      {id: 'xxx', text: 'xxxtext', visible: false},
      {id: 'yyy', text: 'yyytext', visible: false},
      ...
    ]
  }

  togglePopup = id => {
    this.setState(prevState => ({
      popups: [...toggleItem(prevState.popups, id)]
    })
  }

  render() {
    return (
      <table>
        ...
        <td>
          <button onClick={() => this.togglePopup('xxx')} />
        </td>
        ...
      </table>

      <div className="popupsWrap">
        {this.state.popups.map(popup => {
          if (popup.visible) {
            return (
              <div className="poprighttext">{popup.text}</div>
            )
          }
        }}
      </div>
...