Written by James McDonald

July 7, 2018

I have used FortAwesome/react-fontawesome to put a trash icon on a nextjs react page.

<a data-part_id={id} data-meeting_id={meetingId} onClick={(e) => {
window.confirm(‘Do you really want to delete: ‘ + partname) ? deletePart(e.target.dataset.part_id, e.target.dataset.meeting_id) : false;
<FontAwesomeIcon icon=’trash-alt’ />

The problem is that when I click on the anchor link the SVG inside is picked up and then the code fails to pass the data-* attributes to the function

To work around this using styled JSX requires the use of a :global statement to make the required pointer-events: none apply to the svg tag inside the FontAwesomeIcon component

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cstyle%20jsx%3E%7B%60%0A%20%20%20%20%20%20%20%20%20%20%20%20a%20%3E%20%3Aglobal(svg)%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20pointer-events%3A%20none%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%60%7D%3C%2Fstyle%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;style&gt;" title="&lt;style&gt;" />

After the CSS snippet is plugged into the component holding the anchor the event.target then reliably grabs the <a>


Submit a Comment

Your email address will not be published. Required fields are marked *

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

The reCAPTCHA verification period has expired. Please reload the page.

You May Also Like…

Meraki Open Source Licenses

Until today I assumed that Meraki was built in-house with only closed source software. But having a look at the...


If you have Veeam backup failing with the Updating BCD failed with Cannot update SafeBoot flag and SentinelOne is...