An alternative to dangerously set innerHTML

There may be an occasion that you need to render an HTML string when using React.

In most situations, dangerouslySetInnerHTML should suffice:

So dangerous.

But are there any other alternatives?

There are, and one of them is called html-react-parser.

Usage

First, install the package and its dependencies:

$ npm install html-react-parser react react-dom

Now you can do something like this:

Parse it like a boss.

When parsing the HTML string, you can even replace HTML elements with your own custom React Elements:

Replace it like a boss.

Want to play with it some more? Check out the repository and this fiddle:

Use it like a boss.

--

--

--

remarkablemark.org

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Running Javascript code on Android Wallet

Turned on MacBook Pro near brown ceramic mug

HOW TO DEPLOY YOUR FIRST REACT APP TO GITHUB PAGES!

Why CodePen - Why not Visual Studio Code for Web Programming

Shimming CSS variables with Web Workers

Middleware Functions

Learning to Code: Day 34 — Building a Technical Documentation Page

Context — A Valuable Tool in the React Tool-Set

The Essence of Looping in JavaScript

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
remarkablemark

remarkablemark

remarkablemark.org

More from Medium

Let’s Get a Handle on Event Handlers

“Flat” Promises for Reactive Code

Debounce is awesome

Clean Code and Good Reviews

Good code vs bad code cartoon