CODEWITHSUNDEEP
javascripthtmlreactjsjsonparsing
Eric Pezzulo
Eric Pezzulo

Reputation: 399

Parsing JSON into HTML

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>

Upvotes: 1

Views: 42

Answers (1)

Amila Senadheera
Amila Senadheera

Reputation: 13235

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>

Upvotes: 1

Related Questions