In a ReactJs application, fetching data from a Json file which contains some HTML tags, which is displayed as string without interpreting it as HTML.
I considered to use dangerouslySetInnterHTML. However, according to React's official documentation, setting HTML from code seems to be risky.
Any other best practice to achieve the same.
Sample Json:
{
"FAQ" : {
"contents": "Lorem ipsum dolor sit amet. <a href=\"www.test.com\">www.test.com</a>",
}
}
To parse html tags in a Json content in a React application there is a npm package available name 'html-to-react'
Usage:
import React from 'react';
import convertHtmlToReact from '@hedgedoc/html-to-react';
class HtmlComponent extends React.Component {
render() {
const html = '<div>Example HTML string</div>';
return <div>{ convertHtmlToReact (html, true) }</div>;
}
}