1
function handleClick(e) {
     console.log(e.target.value)
}

<Button value={id} onClick={handleClick} id="like-button" variant="light">
  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" 
      fill="currentColor" className="bi bi-heart-fill" viewBox="0 0 16 16">
   <path fillRule="evenodd" d="M8 1.314C12.438-3.248 23.534 4.735 8 15-7.534 4.736 3.562-3.248 8 1.314z" />
  </svg>
  <p>Like</p>
</Button>

when i click on the button i get the value id, but if i click on elements inside the button i get the value of the element that got clicked. any idea how can i get the value -id- no matter where i clicked on?

Dean_Geva
  • 49
  • 5
  • so you mean, when you click svg, it doesn't return {id} ? – wangdev87 Dec 21 '20 at 15:58
  • You could try setting the CSS pointer-events attribute to none for the svg and p, effectively making them have, well, no pointer events, passing everything through to the button. https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events – TARN4T1ON Dec 21 '20 at 16:01
  • no it returns undefined because it has no value – Dean_Geva Dec 21 '20 at 16:01
  • TARN4T1ON - i want to be able to click on everything inside, but thanks for the comment! – Dean_Geva Dec 21 '20 at 16:03
  • https://stackoverflow.com/questions/38861601/how-to-only-trigger-parent-click-event-when-a-child-is-clicked/38861760 – David Frederick Dec 21 '20 at 16:10

1 Answers1

4

use event.currentTarget instead of event.target

wangdev87
  • 8,611
  • 3
  • 8
  • 31