[SOLVED] In typescript, how can I safely render an anchor tag in a string as a react component?

Issue

In my react application, I am getting data from a database and displaying it on the webpage. One of the data, docs.description is a string like this "Click this link <a href='www.example.com'>Example</a>".

Currently everything I have tried is just printing out the entire string or just not working. I want to display the text on the site with the links interpreted and displayed as links should be, like: Click this link Example

Here is the section of code if it helps

export const DocContainer: FC<{docs: AssetDocs}> = ({docs}) => {
  return (
    <div className={styles.docContainer}>
      <Text h2 style={{color:"#26ff91"}}>Docs</Text>
      {docs && docs.description}
    </div>
  );
}

Any help would be greatly appreciated! Please let me know if you need more details.

Solution

There is actually 2 way to do this

The first is the useRef hook which will give you a reference of an HTML element (in your case it would be the parent div) which you can use as if you were in plain JS.

TL;DR you can access the innerHTML prop

const ref = useRef();

return <div ref={ref}>
    // stuff goes here
</div>

Or you can use the dangerouslySetInnerHTML React prop

return <div dangerouslySetInnerHTML={{ __html: "YOUR_HTML_STRING" }}></div>

This should be sanitized tho before you actually use it, because you can get any kind of injection attack.

Personally I haven’t used it, but I found this package which would do the job and it’s moderately popular.

Answered By – kmp

Answer Checked By – David Goodson (BugsFixing Volunteer)