javascript - How to debug this error: Uncaught (in promise) Error: Objects are not valid as a React child -

the full error in console:

uncaught (in promise) error: objects not valid react child (found: object keys {id, name, description, css, ephemeral, readonly, toppost})
if meant render collection of children, use array instead or wrap object using createfragment(object) react add-ons. check render method of exports.(…)

i don't know error means , doesn't point me line in code, don't know do.

i using api.jsx fetch data imgur (specifically call in topic-store.jsx) , trying render data in topic-list.jsx

main.jsx

var react = require('react'); var header = require('./header'); var topiclist = require('./topic-list');  module.exports = react.createclass({     render: function () {         return <div>           <header />           {this.content()}         </div>     },     content: function () {         if (this.props.children) {             return this.props.children         } else {             return <topiclist/>         }     } }); 

header.jsx

var react = require('react'); var router = require('react-router'); var link = router.link; //router's link object renderable component, turns anchor tag when rendered //using link allows user change routes without triggering full page refresh, content on page change browser not refresh  module.exports = react.createclass({     render: function () {         return <nav classname="navbar navbar-default header">           <div classname="container-fluid">             <link to="/" classname="navbar-brand">               imgur browser             </link>             <ul classname="nav navbar-nav navbar-right">               <li><a>topic #1</a></li>             </ul>           </div>         </nav>     } }); 

topic-list.jsx

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 fetched topics             //topics available on topicstore.topics             this.setstate({                 topics: topicstore.topics             });         }.bind(this));     },      render: function () {         return <div classname="list-group">           topic list           {this.rendertopics()}         </div>     },      rendertopics: function () {         return this.state.topics.map(function(topic) {             return <li>               {topic}             </li>         });     } }); 

topic-store.jsx

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));     } }); 

api.jsx

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()         });     } }; 

the issue relies on way render topic object in rendertopics method.

when you're doing this:

return <li>{topic}</li> 

you're trying do:

return <li>{{ id: 1, name: 'one topic' }}</li> 

and react don't know how render raw object. fix issue, specify keys of object want render. example:

rendertopics: function () {   return this.state.topics.map(function(topic) {     return (<li>{topic.id} {topic.name}</li>)   }); }