Saimir Kapaj
Saimir Kapaj

Saimir Kapaj

Render HTML elements from JSON to JSX

Saimir Kapaj's photo
Saimir Kapaj
·Oct 15, 2021·

1 min read

Subscribe to my newsletter and never miss my upcoming articles

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;
 
Share this