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.
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.
Combining all the valuable input from everyone, I was able to create what I believe to be a safe solution using dangerouslySetInnerHTML combined with sanitizeHtml
import { Text } from "@zeit-ui/react";
import React, { FC } from "react";
import styles from "./styles.module.css"
import { AssetDocs } from "./types";
import sanitizeHtml from "sanitize-html"
export const DocContainer: FC<{docs: AssetDocs}> = ({docs}) => {
const createMarkup = () => {
if (docs.description)
return {__html: sanitizeHtml(docs.description)};
}
return (
<div className={styles.docContainer}>
<Text h2 style={{color:"#26ff91"}}>Docs</Text>
<div dangerouslySetInnerHTML={createMarkup()} />
</div>
);
}
Thanks everyone!