CODEWITHSUNDEEP
htmlreactjsfrontend
HarshEc
HarshEc

Reputation: 273

How to display HTML response on DOM, returned by an API call?

My API call returns the below html response and I want to render it on the DOM as a html tags, not as just text with html tags.

API response : <strong>Hello</strong>

How its rendering on DOM : <strong>Hello</strong>

How I'm expecting it to render on DOM : Hello

Upvotes: 1

Views: 2297

Answers (4)

Rashed Rahat
Rashed Rahat

Reputation: 2475

You can achieve it using; html-react-parser

Do following steps:

npm install react-html-parser
# or 
yarn add react-html-parser

Import or require the module:

// ES Modules
import parse from 'html-react-parser';

// CommonJS
const parse = require('html-react-parser');

Make sure to render parsed adjacent elements under a parent element:

<>
  {parse(`<strong>Hello</strong>`)}
</>

Happy coding :)

Upvotes: 1

rommyarb
rommyarb

Reputation: 479

You can use react-html-parser

npm install react-html-parser

import React from 'react';
import ReactHtmlParser from "react-html-parser"

const htmlString = '<strong>Hello</strong>';

function App() {
  return (
    <div>
        {ReactHtmlParser(htmlString)}
    </div>
  );
}

export default App;

Demo: React HTML Parser Example

Upvotes: 1

Ivan
Ivan

Reputation: 1304

Another way is to use innerHTML:

var APIResponse = '<strong>Hello</strong>';
document.getElementById("target").innerHTML = APIResponse;

Resource: https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML

Upvotes: 0

Joris
Joris

Reputation: 2796

You should use dangerouslySetInnerHTML

Upvotes: 2

Related Questions