HomeAbout MeContact

Rendering HTML in React

By Gopal Baskota
Published in React Js
December 31, 2020
1 min read

I ran into this problem - I needed to add an HTML string in a React application, coming from a Rich Text editor, but simply adding {myString} to the JSX was escaping the HTML.. so the HTML tags were displayed in the browser. I googled my problem and came up with two solutions.

First one is by using dangerouslySetInnerHTML . you can use dangerouslySetInnerHTML as an attribute on JSX or HTML element. You need to pass an object with _html key as a value for dangerouslySetInnerHTML .

<div
 dangerouslySetInnerHTML={{
  __html: props.blog.content
 }}></div>

second solution is by using third party library called react-html-parser .

See the library on GitHub: https://github.com/wrakky/react-html-parser for instructions .

Which one to use?

You can third party libraries if you want to, but in the end I chose the native dangerouslySetInnerHTML way.

This dangerously-looking name was a built-in reminder to pay attention at correctly whitelisting the HTML tags I allowed the user to enter to that HTML string.


Tags

ReactjsHTML
Previous Article
Functional programming in javascript

Gopal Baskota

Full stack Web Developer

Topics

JavaScript
NodeJs
React Js

Related Posts

What is react?, and how to get started with React ?
August 01, 2020
6 min
© 2021, All Rights Reserved.

Quick Links

Advertise with usAbout UsContact Us

Social Media