JSX question with ahref tags. Different text input int the backend and need it to render on the react front end as a hyperlink

Question

I'm super new to react but I've been tasked with to me is a super complicated task to me and I was wondering if it could be done. I have an already built backend system backend system where the librarian enters their information sources which may be a website. So they can type in the system a <a href = "google.com"> Where everything is </a> and it comes up as a clickable hyperlink in their system . This is the fun part. The react front end is a public website for everyone else and renders all of this is as just plain text. So on the react side, I'm not getting any hyperlinks because obviously it's react and just rendering the text in this thing called a note. I've tried

export const NoteDisplay: React.FC<{ note: Note }> = ({ note }) => {
  switch (note.kind) {
    case "text":
      return (
        <div>
          {" "}
          {note.text.map((content: string, idx: number) => {
            const result = [];
            const matches = content.match(
              /(.*?)(<a href=")?(https?|www)((".*?>.*?<\/a>)|[^\s>]?)*(.*?)/gi
            );

            if (!!matches) {
              matches.forEach((match) => {
                let link;
                if (/href="/i.test(match)) {
                  const url = match
                    .match(/<a href="(.*?)(?=">)/i)![0]
                    .replace('<a href="', "");
                  const linkText = match
                    .match(/(?:<a href=".*?">)(.*)(?=<\/a>)/)![0]
                    .replace(/(?:<a href=".*?">)/i, "");
                  link = <a href={url}>{linkText}</a>;
                } else {
                  const url = match.match(/(https?|www)[^\s]*/gi)!.join("");
                  link = <a href={url}>{url}</a>;
                }

                const splitter = match.match(
                  /(<a href=")?(https?|www)[^\s]*(.*<\/a>)?/gi
                )![0];
                const paredPlainText = match.split(new RegExp(splitter));
                result.push(paredPlainText[0]);
                result.push(link);
                result.push(paredPlainText[1]);
              });
            } else {
              result.push(content);
            }
            console.log(result);

            return <p>{result}</p>;
          })}
        </div>
      );

and its just spitting back <a href = "google.com"></a> where the google link is clickable but not even the where everything is part is showing. What I want is only for the where everything is part to show and be a clickable link to google.com

Answer 1

React per default escape html characters so you need to use dangerouslySetInnerHTML :

 <div dangerouslySetInnerHTML={{__html: content}}/>

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      links: [
      "<a href='https://google.com'>Google</a>",
      "<a href='https://yahoo.com'>Yahoo</a>"
      ]
    };
  }

 render() {
    return (
      <div>
        <h1>Links</h1>
        <ul>
          {this.state.links.map(link => 
              <li dangerouslySetInnerHTML={{__html: link}} />
           )}
         </ul>
      </div>
    );
  }
}

React.render(<App />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.0/react.min.js"></script>
<div id="root"></div>