Parsing JSON into HTML-CodePudding

I'm fetching data from an API, and one of properties of the data is a description of the item, but the JSON response is written in HTML, and has <a></a> tags and other html elements in it. I would like to NOT display the tags and have them actually work.

for example, this is what its output to the screen:

"Here is the <a href='https://www.google.com'> Link </a>"

This is what it should look like:

"Here is the Link "

How can I achieve this?

(I'm using Next.js)

and this is how I'm displaying the data

<p>{description}</p>

CodePudding user response：

Try below. dangerouslySetInnerHTML is the JSX property you need.

<p dangerouslySetInnerHTML={{ __html: description }}></p>

Check the docs for more info

Working example

function App() {

  const description = "Here is the <a href='https://www.google.com'> Link </a>"; 

  return (
    <p dangerouslySetInnerHTML={{ __html: description }}></p>
  );
};


ReactDOM.render(
  <App />,
  document.getElementById('react')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<div id="react"></div>