Returning HTML Elements from JSON in React
This guide will walk you through the process of rendering HTML elements on the page directly from a JSON response, allowing you to retain text formatting.
Sep 24, 2020 • 4 Minute Read
Introduction
Many modern web apps have the ability to format input text, such as by adding indentation, changing font size or font style, making text bold or italic, and so on. These apps retain the formatting of that text by storing the content along with its markup in the database. The server then returns the entire markup as a string to the frontend, which returns the HTML elements from that JSON to show them on the page.
This guide will walk you through the process of rendering HTML elements directly from a JSON response on the page.
Using the dangerouslySetInnerHTML prop
In React, you can set the inner HTML of a container using the dangerouslySetInnerHTML prop. So if you are using the following line of JavaScript to set the inner HTML of a <div> container ...
const htmlDiv=document.querySelector('div');
const htmlPart='<p>Welcome to this <strong>page</strong></p>'
htmlDiv.innerHTML=htmlPart;
... you can do the same by passing the dangerouslySetInnerHTML prop to your container and passing an object to it with the key __html and value of the HTML you want to set that container's inner HTML to. You can do the above in React as:
import React from 'react';
const RenderHTML=()=>{
const htmlPart='<p>Welcome to this <strong>page</strong></p>'
return(
<div dangerouslySetInnerHTML={ {__html: htmlPart} } />
)
}
Let's look at the practical implementation with a detailed example.
Implementation in React
In this example, you'll create a dummy JSON response that contains some HTML elements as a string and returns them to the DOM. The use case demonstrated in this example pertains to a job portal where a recruiter posted a job with a formatted job description. On showing this job to users, you must show the job description with the same formatting as it was posted.
Creating Dummy JSON
You can mock any API by storing its JSON data inside a JavaScript file and exporting it as an object. Create an empty JavaScript file called data.js with the following code:
export default {
"Job Description": "<h4> Supply Chain Manager @<strong><i>CargoChainzz Pvt Limited </i></strong></h4><br/><p>This job requires at least 3 years of experience</p>"
}
Now you can import this object anywhere.
Using the dangerouslySetInnerHTML prop
Import the data object inside the component in which you want to render it.
import data from './data';
You can either use this data object directly or set the required property of this object to your component's state inside a lifecycle hook. For brevity purposes, let's use the object directly.
Inside an empty <div>, pass the dangerouslySetInnterHTML prop with an object of key __html and value as data["Job Description"], as Job Description property of data contains your HTML elements as a string .
<div dangerouslySetInnerHTML={{__html:data["Job Description"]}}></div>
Now your HTML elements from JSON are returned from the component in JSON to the DOM.
Conclusion
The dangerouslySetInnterHTML prop is convenient to use, as demonstrated in this guide, and has plenty of use cases. However, according to React's official documentation, setting HTML from code is risky because it’s easy to inadvertently expose your users to a cross-site scripting attack, which is why it is named so. Hence, you should be cautious and aware of the vulnerabilities you are exposing your app to.
