There may be an instance where you would want to display HTML inside a React Component. The HTML could be from an external source or a file that you want to display to the user.

By default, React does not permit you to inject HTML in a component, for various reasons including cross-site scripting. However, for some cases like a CMS or WYSIWYG editor, you have to deal with raw HTML. In this guide, you will learn how you can embed raw HTML inside a component.

dangerouslySetInnerHTML Prop

If you try to render an HTML string inside a component directly, React will automatically sanitize it and render it as a plain string.

const myHTML = `<h1>John Doe</h1>`;

const App = () => <div>{myHTML}</div>;

#html #react