2023 answer update

Seem react-html-parser has no longer been maintained for a few years already. As pointed on the comment by Bill Keller, there is a library still actively maintained named html-react-parser. However, please read carefully on the Readme and make some considerations before using it in production. Like in this section Is this XSS safe?, if it is acceptable, then you are good to go.

Another alternative sounds more promising to me because it emphasizes "Safely" on their repo and home page. The library is named "Interweave". Please check the following repo for more detail about installation and usage: https://github.com/milesj/interweave/

2018 answer

Personally, I love to do it just like in the previous answer which recommends the usage of dangerouslySetInnerHTML property in JSX.

Just for an alternative, nowadays there is a library called react-html-parser. You can check it and install from NPM registry at this URL: https://www.npmjs.com/package/react-html-parser. Today's weekly download statistic for that package is 23,696. Looks a quite popular library to use. Even it looks more convenient to use, my self, still need more read and further consideration before really using it.

Code snippet copied from the NPM page:

import React from 'react';
import ReactHtmlParser, { processNodes, convertNodeToElement, htmlparser2 } from 'react-html-parser';

class HtmlComponent extends React.Component {
  render() {
    const html = '<div>Example HTML string</div>';
    return <div>{ ReactHtmlParser(html) }</div>;
  }
}

This question was asked long time ago but I was looking for solution for similar problem recently and I found an easy way to deal with it. So, if someone is still interested, here it is.

Instead of using all these manipulations, you can simply use JSON.parse.

const convertToJSON = (data) => {
  return data.split('\n\n').map(entry => {
    return JSON.parse(entry);
  });
}

This solution works for me. I hope it works for you too.