javascript - Getting error - Objects are not valid as a React child -
chartprovider generating list of charts acc config file. trying render charts in maincomponent.
i getting error: "objects not valid react child (found: object keys {}). if meant render collection of children, use array instead or wrap object using createfragment(object) react add-ons."
maincomponent:
var react = require('react'); var chart = require('chartprovider'); var maincomponent = react.createclass({ render: function () { return ( <div> {chart} </div> ); } }); chartprovider.js
var item = config.wlist.map(function(widget, index) { return ( <chartcomponent width="500px" height="400px" options={{title: widget.title}} /> ); }); module.exports = item ; config.js file contains data:
module.exports = { wlist : [ { title : "average(kbps)", }, { title : "average dl(kbps)", }, { title : "dl", }, { title : "minutes", }, { title : "cell", }, { title : "ul", }] };
you export module via module.exports, not module.export:
module.exports = item; in code, module.exports empty object, cannot rendered , leads error message seeing.
unrelated that, don't close <chartcomponent>. add / end fix this:
<chartcomponent width="500px" height="400px" options={{title: widget.title}} />
Comments
Post a Comment