Parsing JSON into HTML

Question

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>

Amila Senadheera · Accepted Answer · 2021-11-15 16:43:47Z

1

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>

edited Nov 15, 2021 at 16:43

answered Nov 15, 2021 at 16:35

Amila Senadheera

13.4k16 gold badges31 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Amila Senadheera Over a year ago

@Eric Pezzulo, check this out!!

Collectives™ on Stack Overflow

Parsing JSON into HTML

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related