onClick function doesnt take the value when i click on elements inside the button

Question

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?

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. developer.mozilla.org/en-US/docs/Web/CSS/pointer-events — TARN4T1ON
– TARN4T1ON, Commented Dec 21, 2020 at 16:01
TARN4T1ON - i want to be able to click on everything inside, but thanks for the comment! — Dean_Geva
– Dean_Geva, Commented Dec 21, 2020 at 16:03

topdev87 · Accepted Answer · 2020-12-21 16:02:34Z

4

use event.currentTarget instead of event.target

answered Dec 21, 2020 at 16:02

topdev87

8,7913 gold badges11 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

onClick function doesnt take the value when i click on elements inside the button

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related