Getting error - Objects are not valid as a React child

Question

ChartProvider is generating list of charts acc to config file. I am trying to render all charts in MainComponent.

I am getting error: "Objects are not valid as a React child (found: object with keys {}). 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."

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",      
        }] 
      };

heres a pen that works, see if you can repro your problem with a fork. codepen.io/anon/pen/rWxyyv?editors=1010 — skav

TimoStaudinger TimoStaudinger · Accepted Answer · 2016-11-10T20:33:00

You export from a module via module.exports, not module.export:

module.exports = item;

In your code, module.exports is an empty object, which cannot be rendered and leads to the error message you are seeing.

Unrelated to that, you don't close your <ChartComponent>. Add a / to the end to fix this:

<ChartComponent width="500px" height="400px" options={{title: widget.title}} />

Getting error - Objects are not valid as a React child

1 Answers