I have an app that gets RSS/Atom feeds in the backend (Ruby on Rails) and sends the feeds as JSON to the frontend. A parsed feed (obtained using a library such as simpleRSS or Feedjira in the backend) is an object with keys being things like title, summary, content, etc, and values being the associated strings.
I send the parsed feed to the frontend as JSON. Then I would like to render, specifically, the "content" of the feed in a React component. The content of a feed is a big string of HTML.
I tried to use JQuery to turn the string into an object of HTML elements, then turn it into an array, and then render the array:
var FeedItem = react.createClass({
render: function() {
var content = $(this.props.feed.content);
content = Object.keys(content).map(function(key) {
return content[key];
});
return (
<div>
{content}
</div>
)
}
})
I get the error:
Uncaught Error: Invariant Violation: Objects are not valid as a React child (found: [object HTMLDivElement]). If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) from the React add-ons. Check the render method of `FeedItem`.
How do I render a big string of HTML of a whole page into a react component?
Here is an an example of a string of content, obtained from Google Analytics Blog (below is the content from a single feed obtained from the blog).
"<div dir=\"ltr\" style=\"text-align: left;\" trbidi=\"on\"><div style=\"-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Arial; font-size: 12px; line-height: normal;\">When Google was a few years old, we wrote up a list of <a href=\"https://www.google.com/about/company/philosophy/\"><span style=\"-webkit-text-stroke-color: rgb(18, 85, 204); color: #1255cc;\">Ten things we know to be true</span></a>. The list includes items like “Focus on the user and all else will follow” as well as “Fast is better than slow.” It would be tough to say that much of the mobile web has adhered to these principles. Users often get frustrated by poor experiences in which sites load slowly or will lock up trying to load resources that clog their data connections.</div><div style=\"-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Arial; font-size: 12px; line-height: normal; min-height: 14px;\"><br /></div><div style=\"-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Arial; font-size: 12px; line-height: normal;\"><span style=\"-webkit-text-stroke-color: rgb(18, 85, 204); color: #1255cc; text-decoration: underline;\"><a href=\"https://www.ampproject.org/\">The Accelerated Mobile Pages Project</a></span> (AMP) is an open source initiative that aims to address these problems by enabling content to load instantaneously and provide a better web experience for all. AMP introduces a new format that is a flavor of HTML. It’s built to prioritize speed and a fantastic user experience. One way that AMP provides reliably good page loading performance is by restricting the ability to add custom JavaScript to pages and instead relying on built in, reusable components.</div><div style=\"-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Arial; font-size: 12px; line-height: normal; min-height: 14px;\"><br /></div><div style=\"-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Arial; font-size: 12px; line-height: normal;\">Today, the AMP team <a href=\"https://amphtml.wordpress.com/2016/01/28/analytics-and-measurement-for-amp-pages\"><span style=\"-webkit-text-stroke-color: rgb(18, 85, 204); color: #1255cc;\">announced the launch of an analytics component</span></a> that will enable measurement on AMP pages. The Google Analytics team is committed to helping our users measure their content wherever it appears. So, for publishers looking to use AMP to provide an improved user experience, we’ve released Google Analytics measurement capabilities for Accelerated Mobile Pages. AMP support in Google Analytics makes it easy to identify your best content and optimize your user experience.</div><div style=\"-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Arial; font-size: 12px; line-height: normal; min-height: 14px;\"><br /></div><div style=\"-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Arial; font-size: 12px; line-height: normal;\"><b>How Google Analytics Support Works</b></div><div style=\"-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Arial; font-size: 12px; line-height: normal; min-height: 14px;\"><br /></div><div style=\"-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Arial; font-size: 12px; line-height: normal;\">Analytics on AMP is handled by an open source, reusable component that the Google Analytics team helped build. The <amp-analytics> component can be configured with Google Analytics specific configuration parameters to record pageviews, events, and even custom dimensions. That configuration works hand in hand with a global event listener that automatically detects triggers like button presses. As a result, there’s no need to scatter custom JavaScript throughout your page to detect actions that should trigger events and hits. Instead, you can define which actions should trigger hits within the configuration section and let the magic of AMP do the rest.</div><div style=\"-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Arial; font-size: 12px; line-height: normal; min-height: 14px;\"><br /></div><div style=\"-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Arial; font-size: 12px; line-height: normal;\"><b>How to Get Started</b></div><div style=\"-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Arial; font-size: 12px; line-height: normal; min-height: 14px;\"><br /></div><div style=\"-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Arial; font-size: 12px; line-height: normal;\">Before you get started with AMP Analytics, you’ll need to get started with AMP itself. The <a href=\"http://ampproject.org/\"><span style=\"-webkit-text-stroke-color: rgb(18, 85, 204); color: #1255cc;\">AMP website</span></a> contains <a href=\"https://www.ampproject.org/docs/get_started/create_page.html\"><span style=\"-webkit-text-stroke-color: rgb(18, 85, 204); color: #1255cc;\">a great introduction to getting started</span></a>. Once you have an AMP page up, it’s time to start thinking about how you’d like to measure its performance. </div><div style=\"-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Arial; font-size: 12px; line-height: normal; min-height: 14px;\"><br /></div><div style=\"-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Arial; font-size: 12px; line-height: normal;\">We recommend that you use a separate Google Analytics property to measure your AMP pages. AMP is a new technology that’s going to mature over time. As such, some of the functionality that you’re used to in web analytics won’t immediately be available in AMP analytics right away. AMP pages can appear in multiple contexts, including through different syndication caches. Because of that, a single user that visits an AMP version of a page and a HTML version of a page can end up being treated as two distinct users. Using a separate Google Analytics property to measure AMP pages makes it easier to handle these issues.</div><div style=\"-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Arial; font-size: 12px; line-height: normal; min-height: 14px;\"><br /></div><div style=\"-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Arial; font-size: 12px; line-height: normal;\">Once you have your AMP page and new Google Analytics property set up, you’ll want to reference <a href=\"https://support.google.com/analytics/answer/6343176\"><span style=\"-webkit-text-stroke-color: rgb(18, 85, 204); color: #1255cc;\">the requirements for using Analytics on AMP pages</span></a> as well as the <a href=\"https://developers.google.com/analytics/devguides/collection/amp-analytics/\"><span style=\"-webkit-text-stroke-color: rgb(18, 85, 204); color: #1255cc;\">developers guide for instrumenting measurement</span></a>.</div><div style=\"-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Arial; font-size: 12px; line-height: normal; min-height: 14px;\"><br /></div><div style=\"-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Arial; font-size: 12px; line-height: normal;\"><b>What’s Next</b></div><div style=\"-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Arial; font-size: 12px; line-height: normal; min-height: 14px;\"><br /></div><div style=\"-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Arial; font-size: 12px; line-height: normal;\">Multiple technology partners, including Google Search, Twitter, Pinterest, and LinkedIn have announced that they’ll start surfacing AMP pages in the coming months. The Google Analytics team is excited to support AMP from day one and look forward to growing our offering as AMP’s capabilities expand.</div><div style=\"-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Arial; font-size: 12px; line-height: normal; min-height: 14px;\"><br /></div><br /><div style=\"-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Arial; font-size: 12px; line-height: normal;\"><i>Posted by Dan Cary, Product Manager and Avi Mehta, Software Engineer</i></div></div><div class=\"feedflare\">\n<a href=\"http://feeds.feedburner.com/~ff/blogspot/tRaA?a=LxtIVDKQw_w:GPFyrUXb_LI:yIl2AUoC8zA\"><img src=\"http://feeds.feedburner.com/~ff/blogspot/tRaA?d=yIl2AUoC8zA\" border=\"0\"></img></a> <a href=\"http://feeds.feedburner.com/~ff/blogspot/tRaA?a=LxtIVDKQw_w:GPFyrUXb_LI:-BTjWOF_DHI\"><img src=\"http://feeds.feedburner.com/~ff/blogspot/tRaA?i=LxtIVDKQw_w:GPFyrUXb_LI:-BTjWOF_DHI\" border=\"0\"></img></a>\n</div><img src=\"http://feeds.feedburner.com/~r/blogspot/tRaA/~4/LxtIVDKQw_w\" height=\"1\" width=\"1\" alt=\"\"/>"
