Q: How to trigger the parent element when firing an event? I want to console log the button every time the button is clicked but if I click any child element within the button, the child gets printed instead which is not I want. How do I make sure the element which has the event listener is printed?
 const onCrossClick = (e) => {
   console.log(e.target);
 };

<button
  className="delete-button"
  onClick={onCrossClick}
>
  <i className="fas fa-times-circle fa-2x"></i>
</button>


A: const onCrossClick = (e) => {
   console.log(e.currentTarget);
};

<button
  className="delete-button"
  onClick={onCrossClick}>    
     <i className="fas fa-times-circle fa-2x"></i>
</button>


A: Use closest().
const onCrossClick = (e) => {
   console.log(e.target.closest("button"));
};

