How to render HTML in React

In this article, we will show you how to render raw HTML in React. Here, you will learn how to render HTML strings in React component without any third-party library.

Checkout more articles on ReactJS

• Create a toggle switch in React
• How to implement a circular progress bar in React
• MultiSelect dropdown in React
• How to add a loading in React AG Grid
• Implement idle timeout popup in React

If you render a HTML string inside a component directly, React will automatically render it as a plain string.

const strHTML = `<h1>Clue Mediator</h1>`;
const App = () => <div>{strHTML}</div>;

Output:

Output - Render raw HTML - Clue Mediator

The dangerouslySetInnerHTML is React’s replacement for using `innerHTML` in the browser DOM.

const strHTML = `<h1>Clue Mediator</h1>`;
const App = () => <div dangerouslysetinnerhtml={{ __html: strhtml }}>;
</div>

Output:

Output - Render raw HTML using dangerouslySetInnerHTML - Clue Mediator

That’s it for today.
Thank you for reading. Happy Coding..!! 🙂