I have a function that splits and checks for a word that matches the regex.. and if word found it add it in a span tag and style it then parse it using react parser..
const checkContent = (content) => {
content = content.split(' ')
let tag = '<p>'
content.map(word => {
if(word.match(regex))
tag += ` <span className="taggedUser">${word}</span> `
else
tag += ' ' + word
})
tag += '</p>'
return ( parse(`<div>${tag}</div>`))
}
However i'm having difficulty trying to add an event listner to it like OnClick().
The only solution I've come up with is adding the listners by js via addEventListner().
My question is there any other way other than the above mentioned. Adding the listner directly to the span tag like this <span OnClick={handleClick} className="tagged">${word}</span> and then returning it?? Any ideas??
Have you tried adding onClick=${} or onClick={} directly to the span on line 6? I don't think it will actually work and I believe if you are using parse like this, from a library, to parse a react component you will need to add listeners via addEventListener().