title: How to debug this error: Uncaught (in promise) Error: Objects are not valid as a React child
body: <p>The full error in console: </p>
  
  <blockquote>
    <p>Uncaught (in promise) Error: Objects are not valid as a React child (found: object with keys {id, name, description, css, ephemeral, readonly, topPost})<br>
    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 <code>exports</code>.(…)</p>
  </blockquote>
  
  <p>I don't really know what this error means and it doesn't point me to a line in the code, so I don't know what to do. </p>
  
  <p>I am using <strong>api.jsx</strong> to fetch data from Imgur (specifically I call it in <strong>topic-store.jsx</strong>) and then trying to render the data in <strong>topic-list.jsx</strong></p>
  
  <p><strong>main.jsx</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>var React = require('react');
  var Header = require('./header');
  var TopicList = require('./topic-list');
  
  module.exports = React.createClass({
      render: function () {
          return &lt;div&gt;
            &lt;Header /&gt;
            {this.content()}
          &lt;/div&gt;
      },
      content: function () {
          if (this.props.children) {
              return this.props.children
          } else {
              return &lt;TopicList/&gt;
          }
      }
  });
  </code></pre>
  
  <p><strong>header.jsx</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>var React = require('react');
  var Router = require('react-router');
  var Link = Router.Link; //Router's Link object is a renderable component, that turns into an anchor tag when rendered
  //Using Link allows a user to change routes without triggering a full page refresh, the content on the page will change but the browser will not refresh
  
  module.exports = React.createClass({
      render: function () {
          return &lt;nav className="navbar navbar-default header"&gt;
            &lt;div className="container-fluid"&gt;
              &lt;Link to="/" className="navbar-brand"&gt;
                Imgur Browser
              &lt;/Link&gt;
              &lt;ul className="nav navbar-nav navbar-right"&gt;
                &lt;li&gt;&lt;a&gt;Topic #1&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
            &lt;/div&gt;
          &lt;/nav&gt;
      }
  });
  </code></pre>
  
  <p><strong>topic-list.jsx</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>var React = require('react');
  var TopicStore = require('../stores/topic-store');
  
  module.exports = React.createClass({
  
      getInitialState: function () {
          return {topics: []}
      },
  
      componentWillMount: function () {
          TopicStore.getTopics().then(function () {
              //We have successfully fetched topics
              //Topics are available on TopicStore.topics
              this.setState({
                  topics: TopicStore.topics
              });
          }.bind(this));
      },
  
      render: function () {
          return &lt;div className="list-group"&gt;
            Topic List
            {this.renderTopics()}
          &lt;/div&gt;
      },
  
      renderTopics: function () {
          return this.state.topics.map(function(topic) {
              return &lt;li&gt;
                {topic}
              &lt;/li&gt;
          });
      }
  });
  </code></pre>
  
  <p><strong>topic-store.jsx</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>var Api = require('../utils/api');
  var Reflux = require('reflux');
  
  module.exports = Reflux.createStore({
  
      getTopics: function() {
  
          return Api.get('topics/defaults').then(function(json) {
  
              this.topics = json.data;
  
          }.bind(this));
      }
  });
  </code></pre>
  
  <p><strong>api.jsx</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>var Fetch = require('whatwg-fetch');
  var rootUrl = 'https://api.imgur.com/3/';
  var apiKey = 'e80dc51eb3f6d56';
  
  module.exports = window.api = {
      get: function(url) {
          return fetch(rootUrl + url, {
              headers: {
                  'Authorization': 'Client-ID ' + apiKey
              }
          }).then(function (response) {
              return response.json()
          });
      }
  };
  </code></pre>