Render HTML elements from JSON to JSX
To render HTML
elements from JSON
to JSX
we need to use dangerouslySetInnerHTML
which is React’s replacement for using innerHTML
in the browser DOM
{
"content": "This is a <strong>bold</strong> text.",
}
import data from './data.json';
const App = () => {
return (
<div dangerouslySetInnerHTML={{ __html: data.content }} />
);
};
export default App;
The best solution is to create a reusable component.
import data from './data.json';
const FormatHtml = ({ content }) => (
<div dangerouslySetInnerHTML={{ __html: content }} />
);
const App = () => {
return (
<FormatHtml content={data.content} />
);
};
export default App;