Saimir Kapaj

Render HTML elements from JSON to JSX

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

1 min read

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;