Can an element with no tag have an onClick function? (Reactjs)

I have a header element:

<h2>☶ Today's Bills</h2>

I want the ☶ (&#9782) icon to have an onClick function, but without giving it a tag so it stays as on <h2> tag.

My approach was this

<h2> <onClick={somfunc}> ☶ </> Today's Bills</h2> // doesn't work

So is there a way to do so? And if not, is there a way to give this part of the <h2> tag the onClick?

I don’t want to make it 2 tag-elements and write css to have them aligned as this will probably break something else. I’m relatively new so not having to do so would be better.

Answer

This can be done by CSS without inserting another element.

If you absolutely don’t want to insert an extra element into the HTML then you can use a pseudo before element.

This can hold the special character and have pointer-events set to auto while the actual h element has pointer-events none set.

h2 {
  pointer-events: none;
}

h2::before {
  content: "2636";
  pointer-events: auto;
}

<h2 onclick="alert('I have seen a click');">Today's Bills</h2>

[Tested only on Edge/Chrome so far]

However, there may be accessibility issues in that I’m not certain that every screen reader will announce that special character so the possibility of clicking it may be missed by someone using special software.