CODEWITHSUNDEEP
javascripthtmlcssreactjstags
Etch
Etch

Reputation: 492

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

I have a header element:

<h2>&#9782; 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}> &#9782; </> 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.

Upvotes: 0

Views: 465

Answers (2)

A Haworth
A Haworth

Reputation: 36590

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.

Upvotes: 1

Kevin Gilbert
Kevin Gilbert

Reputation: 1022

that won't work, use a element (like span)

Edit: this JSX need to convert into HTML and need to bind the event to actual element.

Upvotes: 2

Related Questions