ReactJS - JSON and HTML markup

Question

I am new to ReactJS. I am looping through JSON and need to include some links.

My JSON looks like this:

"text": ["Nähere Informationen zu den Funktionalitäten der Plattform und der Dienste finden Sie unter <a href=\"/features\">/features</a>."],

But when I loop through and expose the data, it just exposes plain text HTML.

<div className='small-53 medium-54 large-55 medium-offset-1 large-offset-1 columns end'>
    <p className='text--uppercase text--book border--solid--bottom-red padding-bottom-10'>
        {item.title}
    </p>
</div>

Possible duplicate of [Rendering raw html with reactjs](https://stackoverflow.com/questions/27934238/rendering-raw-html-with-reactjs) — Fabian Schultz, Jun 01 '17 at 14:07

score 1 · Accepted Answer · answered Jun 01 '17 at 14:08

Try:

<div className='small-53 medium-54 large-55 medium-offset-1 large-offset-1 columns end'>
  <p className='text--uppercase text--book border--solid--bottom-red padding-bottom-10' dangerouslySetInnerHTML={ {__html: item.title} }/>
</div>

You can read more about dangerouslySetInnerHTML here

ReactJS - JSON and HTML markup

1 Answers1