In react js, cannot get button value when clicking icon inside button

Question

So I'm trying to get the value from the button. This is my button:

<button
  className="toggle__btn"
  value={el._id}
  onClick={toggle}
>
     <i className="fa-solid fa-circle-info fs-4"></i>
</button>

The functions are as follows

const toggle = (event) => {
    const id = event.target.value;
    console.log(id);
  };

The problem is that I can't get the value if I click on the icon, but I can when I click outside the icon but still inside the button (there is empty space outside the icon). I want it to return the id even when the icon is clicked. How to do it? Why does this happen?

Answer 1

Try

const toggle = (event) => {
    const id = event.currentTarget.value;
    console.log(id);
};

Look at this https://medium.com/@etherealm/currenttarget-vs-target-in-js-2f3fd3a543e5