How to output string as HTML in JSX?

Question

I'm storing text content in a JSON file and outputting it in JSX. (In my case, I'm using Gatsby and querying the JSON using GraphQL.)

For example, the following JSON...

// example.json
[
  { "phrase": "Hello, world!" },
  { "phraseWithHTML": "<em>Hello</em>, <a href=\"https://example.com\">world!</a>" }
]

...is output in the following JSX:

// ...
<p>{example.phrase}</p>
<p>{example.phraseWithHtml}</p>
// ...

In both cases, the strings are output as plain text (i.e. phraseWithHtml is displayed as a string rather than the intended: Hello world.

Is there a way to output example.phraseWithHTML as HTML instead? Do I need to store it differently in the JSON file? Is there a way to transform it in the JSX?

Agreed. I did a ton of Googling and didn't come across it, though, so hopefully the way I've asked the question here will help someone who uses similar search terms to mine. — ooloth
– ooloth, Commented Feb 23, 2018 at 20:20

th3n3wguy · Accepted Answer · 2018-02-23 20:12:02Z

4

You can use the Dangerously Set innerHTML functionality from React to do this.

// ...
<p>{example.phrase}</p>
<p dangerouslySetInnerHTML={ return {__html: example.phraseWithHtml}; }></p>
// ...

edited Feb 23, 2018 at 20:12

answered Feb 23, 2018 at 19:55

th3n3wguy

3,7242 gold badges25 silver badges31 bronze badges

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

4 Comments

th3n3wguy Over a year ago

If this is the correct answer for you, then can you please select it as the Accepted Answer so people can see it in the future? Thanks!

ooloth Over a year ago

Yup! I will. Just wondering about the code you added to answer - should there be an __html: inside the brackets and before the example.phraseWithHtml? I think there might also need to be a second level of {} there as well... The final version would be <p dangerouslySetInnerHTML={{__html: example.phraseWithHtml}} />.

th3n3wguy Over a year ago

I updated the code for you @ooloth. Someone else edited my answer and added that code, so I added another edit for you.

ooloth Over a year ago

Lovely. Just wanted to make sure a future newbie could copy/paste with no issues.

Collectives™ on Stack Overflow

How to output string as HTML in JSX?

1 Answer 1

4 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Linked

Related