Suppose I have the following code:
const text = "This is a piece of text with a <a>link</a>";
const Comp = () => {
return <div>{text}</div>;
};
On the resulting page, I see the literal text "This is a piece of text with a <a>link</a>". How to convert the word "link" into an actual <a> element?
You need to use dangerouslySetInnerHTML to use it.
Check below snippet.
function createMarkup() {
const text = "This is a piece of text with a <a>link</a>";
return {__html: text};
}
function setHtml() {
return <div dangerouslySetInnerHTML={createMarkup()} />;
}
const Comp = () => {
return <div>{setHtml()}</div>;
};