Objects not valid issue

- 1 answer


I have the following component that is a lot like the React.js main tutorial. Basically, I have an api that I'm pulling from and trying to load the data:

var Box = React.createClass({
   getInitialState: function () {
      return {
        data: {
          items: []
   loadStuffFromServer: function() {
         url: this.props.url,
         dataType: 'json',
         cache: false,
         success: function(data) {
            this.setState({data: data});
         error: function(xhr, status, err) {
            console.error(this.props.url, status, err.toString());
  componentDidMount: function() {
  render: function() {
    var blah = this.state.data;
    return (
           { blah }

However when I put blah there, I get the error: Uncaught Error: Invariant Violation: Objects are not valid as a React child (found: object with keys {items}). 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 ofBox.

I call my component with react rails and <%= react_component('Box',url: "URLHERE", pollInterval: 1000) %>




Use Array (data.items) instead of Object

var blah = this.state.data.items;

render: function () {
   var blah = this.state.data.items.map(function (item) {
     return <p>
       { item.content }

   return <div>
     { blah }
source: stackoverflow.com