jsonparsingeditorjs

Correctly display HTML from JSON

I'm using editor.js html-parser to transform my data from JSON to html.

 const edjsParser = edjsHTML();
 let html = edjsParser.parse(JSON.parse(objective));
 console.log(html, "html");

It works fines, my html output is now :

[
"<img src=\"https://res.cloudinary.com/climact/image/upload/v1647473655/image_7a710834c2.png\" alt=\"Image\" />",
"<h2>Header</h2>",
"<br/>"
]

But now, how can I display it on my react page ? When I try to display it using {html} it didnt render as html but as string.

Solution

  • To insert it inside a container, like a div, you can use dangerouslySetInnerHTML:

    return <div dangerouslySetInnerHTML={{ __html: html }}></div>;