Uncaught Invariant Violation on rendering google charts using react

Question

I have created a small react program to display a scatter google chart. I have 3 files in total :- a) index.html b)main.js which renders my scatterChart & c) ScatterChart.js which is a react component which my main.js renders ScatterChart.js looks like :

export default class PieChart extends React.Component {
	
constructor(){
		super();
		var myOptions = {
        title: 'Age vs. Weight comparison',
        hAxis: {title: 'Age', minValue: 0, maxValue: 15},
        vAxis: {title: 'Weight', minValue: 0, maxValue: 15},
        legend: 'none'
    };
 
    var myData = [
       	['Age', 'Weight'],
       	[ 8,      12],
       	[ 4,      5.5],
       	[ 11,     14],
       	[ 4,      5],
       	[ 3,      3.5],
       	[ 6.5,    7]
    ];
   
   	 this.state={
       	data : myData,
       	options : myOptions
      };
 
	}


render() {
	return(
	        <Chart chartType = "ScatterChart" data = {this.state.data} options = {this.state.options} graph_id = "ScatterChart"  width={"100%"} height={"400px"}  legend_toggle={true} />
	      
      );
 }}

this returns me the following error : Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. Check the render method of ScatterChart.

Answer 1

You are using <Chart />-component in your render method but at least your example doesn't show you defining it anywhere, for instance by importing it.

import Chart from "./foochart.jsx";

Answer 2

I have used react-google-charts npm module
Please import which ever modules you need.

import {Chart} from 'react-google-charts';
export default class GoogleChart extends React.Component {
constructor() {
    super();


    var columns=   [{
                        'type' : 'date',
                        'label' : 'Month'
                    },
                    {
                        'type': 'number',
                        'label' : 'Count'
                    } 

                    ];
        var rows = [
                    [ new Date(2015, 0),  20    ],
                    [ new Date(2015, 4), 30     ],
                    [ new Date(2015, 6), 20    ],
                    [ new Date(2015,9),  28    ],
                    [  new Date(2015, 11), 58    ]
             ];

        this.state={

                'rows':rows,
                'columns':columns,
                'chartType': "LineChart",
                'div_id': "AirPassengers",
                options : {title: "XXX Perfomance Index"}
        }

}

render() {

    return (

            <Chart chartType={this.state.chartType} width={"700"} height={"500"} rows={this.state.rows} columns={this.state.columns} options = {this.state.options} graph_id={this.state.div_id}  />                                          
        );
}

}

The method which uses the property data:{} needs a column:['xx'] property in <Chart/> since there's a condition which checks the length of column, and it requires the length of column to be one or more.