Wrong event.target when clicking button child element

Question

I have the following element representing a button in a survey:

<button name={id} value={value} onclick={handleChoiceClick} className="choice__button">
   <img src={image} className="choice__button-image"/>
   <span className="choice__button-title">Button title</span>
</button>

The handleChoiceClick function triggers the handleChange function and stores some data by the button's name and value:

const handleChoiceClick = (e) => {
   handleChange(e.target.name, e.target.value);
};

This works fine, but when I click one of the child elements inside the button (image or span) the handleChoiceClick function gets another event.target as a parameter and the name and values are undefined.

What is the best way to solve this issue? Checking the event.target inside the handleChoiceClick or is there a simpler way?

Answer 1

If you want the element that you hooked the event on, use event.currentTarget rather than event.target . In your case, that will always be the button element.

Answer 2

const handleChoiceClick = (e) => {   
   var buttonElement = e.target.closest('.choice__button')
   handleChange(buttonElement.name, buttonElement.value);
};

This can give you the name and value of the required button although the target is any other element inside the button.