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
– Patrick Evans, Commented Aug 29, 2017 at 15:11
Removing the quote makes the string invalid. Instead use the string/text to create the required html element, refer stackoverflow.com/questions/2522422/… — Pugazh
– Pugazh, Commented Aug 29, 2017 at 15:12

Pugazh · Accepted Answer · 2017-08-29 15:16:47Z

0

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>

answered Aug 29, 2017 at 15:16

Pugazh

9,5715 gold badges36 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

T Krett · Accepted Answer · 2017-08-29 15:57:04Z

0

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()} />

answered Aug 29, 2017 at 15:57

T Krett

691 gold badge1 silver badge8 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related