Question 50010 in Javascript Question posted in
A very good W3school tutorial can be found here.

event target javascript not working accurate

I have td in react that have onclick event function , the function send id of td to backend node.js
and backend will delete that from databass
here is my problem
sometimes e.target.id gets empty enter image description here but the element has id enter image description here
when i look in chrome debugger,
why this happing ?? but sometimes its work fine enter image description here
the id is from another axios.get and mapped in react

<td
  className="deletebutton"
  id={list.id}
  onClick={async (e) => {
    const deleteid = await e.target.id;
    const socket = io(`http://${process.env.REACT_APP_RUN}:3001`, {
      transports: ["websocket", "polling", "flashsocket"]
    });

    await axios.post(
      `http://${process.env.REACT_APP_RUN}:3001/api/delete/single`,
      {
        idDelete: "" + deleteid + ""
      }
    );
    await socket.emit("get date", ip);
  }}
>
  delete
  <i>
    <IconContext.Provider value={{ size: "16px", className: "factor-icons" }}>
      <div>
        <AiFillDelete />
      </div>
    </IconContext.Provider>
  </i>
</td>;

i tried promises but it has same problem

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    hi thank you @SimoneRossaini it is work with e.currentTarget.id in this case

    but what is diffrence between e.target.id and e.currentTarget.id in this case and how sometimes e.target.id works good and sometimes not


  2. 0

    Do you really need to get the id from the e.target.id?

    That’s not a recommended way of doing things in Reactjs.
    The id could be used from the way you have it in the list.id if they are the same.

    So you code should look like this instead

    ...
id={list.id}
onClick={async (e) => {
  const deleteid = list.id;
  ...
}}
...
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search