CODEWITHSUNDEEP
reactjssvgonclick
imkeVr
imkeVr

Reputation: 472

React onClick event on <svg/> not working

I'm trying to attach a onClick event on a svg icon. I left out the unnecessarysvg pathfill code below but I tried to attach a onClick event and to test it right now the onClick event just triggers a log in console but it is not logging anything when I click the icon. Is it maybe not possible to attach an event directly to a svg?

<svg class="bi bi-gear" onClick={console.log('click')} width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg"   > </svg>

Upvotes: 1

Views: 4410

Answers (1)

Cyril Wallis-Davy
Cyril Wallis-Davy

Reputation: 337

Change your onClick like that.

<svg class="bi bi-gear" onClick={() => {console.log('click')}} width="1em" height="1em" 
viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg"   > </svg>

Upvotes: 4

Related Questions