React button onClick referencing SVG and not the event

Question

I'm trying to pass on the value of a button to a function, however when the button is clicked the event is coming from the SVG and not from the button itself, when I click the button right on the edge where the SVG is not present the event fires normally. How can I make the SVG to be ignored in the onClick? I want the event to be from the button and not from the SVG. I am using Font Awesome and importing icons through the React library.

JSX:

 <button className="btn-vote" value={site._id} name="1" onClick={handleVote}>{upSVG} 
 </button>

CSS:

.btn-vote {
  font-size: 1.9vw;
  background: none;
  border: none;
  height: 100%;
  width: 50%;
}

Does handleVote use this or does it use event.target? – A Haworth Mar 16 '21 at 17:10 — A Haworth, Mar 16 '21 at 17:10

score 8 · Accepted Answer · answered Mar 16 '21 at 17:25

8

use css property pointer-events for your upSVG, then it will be ignored when you clicked on the button.

   pointer-events: none;

Hope it will be fixed your issue.

Else you can call a function to stopPropagation like this.

<svg onClick={e=> e.stopPropagation(); }/>

answered Mar 16 '21 at 17:25

Numan Ashiq

121
4

1

perfect exactly what I was looking for, thank you. – Kas Mar 18 '21 at 14:50

score 2 · Answer 2 · answered Mar 16 '21 at 17:21

You have an event surfacing, look here - https://stackoverflow.com/questions/35914680/how-to-call-stoppropagation-in-reactjs,

function App () {
  const handleVote = e => console.log(e)

  const stopPropagation = e => e.stopPropagation()
  return (
    <div className='App'>
      <MyComponent />
      <button
        className='btn-vote'
        value={'fdsdfsd'}
        name='1'
        onClick={handleVote}
      >
        <i onClick={stopPropagation} className='fab fa-500px'></i>
      </button>
    </div>
  )
}

React button onClick referencing SVG and not the event

2 Answers2