How to print an objects value that contains html with Javascript React

Question

So Currently I have this as my object for Props

{
    id: "1",
    summary: "HTML content inside this string",
    name: "John"
}

so what I was trying to do was remove the string so it would print the html as html not as a string but the error I would get with JSON.parse() is this SyntaxError: Unexpected token o in JSON at position 1

HTML content is a very simple Ul with a list of Li's.

How else can I render an objects value that holds HTML so it prints as HTML.

Any help would be amazing.

Thanks

The SynataxError you are getting more than likely means you are passing an object to JSON.parse() instead of JSON text, check the variable that you are using (console.log) — Patrick Evans, Aug 29 '17 at 15:11
Removing the quote makes the string invalid. Instead use the string/text to create the required html element, refer https://stackoverflow.com/questions/2522422/converting-a-javascript-string-to-a-html-object — Pugazh, Aug 29 '17 at 15:12

score 0 · Answer 1 · answered Aug 29 '17 at 15:16

Removing the quote makes the string invalid. Instead use the string/text to create the required html element.

Check below example.

var props = {
  id: "1",
  summary: "<div><ul><li>Some text here</li></ul></div>",
  name: "John"
}

var htmlObject = document.createElement('div');
htmlObject.innerHTML = props.summary;
document.getElementById("t").appendChild(htmlObject);

<div id="t">
</div>

score 0 · Answer 2 · answered Aug 29 '17 at 15:57

Figured it out and Thank you for all your help.

What I did to get it to render with react was create a function for the output to be modified

summary() {
    return {__html: modal.summary
}

Then I used the dangerouslySetInnerHTML and it worked

<div id="summary" dangerouslySetInnerHTML={summary()} />

How to print an objects value that contains html with Javascript React

2 Answers2