Is there a way to render a typescript string containing an anchor tag as a react component?-CodePudding

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.

CodePudding user response：

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.

CodePudding user response：

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!