React Component TypeError Issue

Question

I have installed the react chart component and imported it into my project. But after importing it, I am getting the following error:

Any help with the issue ? I am having the following code:

import PropTypes from "prop-types";
import { connect } from "react-redux";
import React, { Component } from "react";
// import LineChart from 'react-chartjs';
// import { Sparklines, SparklinesBars } from 'react-sparklines';
import Chart from "react-google-charts";

class AnalyticsPage extends Component {
    render() {
        const data = [
            ["Year", "Visitations", { role: "style" }],
            ["2010", 10, "color: gray"],
            ["2020", 14, "color: #76A7FA"],
            ["2030", 16, "color: blue"],
            [
                "2040",
                22,
                "stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF"
            ],
            [
                "2050",
                28,
                "stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2"
            ]
        ];

        return (
            <div>
                Analytics
                <div>
                    <Chart chartType="BarChart" width="100%" height="400px" data={data} />
                </div>
            </div>
        );
    }
}

const AnalyticsPageWithRedux = connect()(AnalyticsPage);
export default AnalyticsPageWithRedux;

Answer 1

In your render return you just provide "Analytics", which in essence is just providing the non-instantiated Analytics class. Use JSX as you did with Chart

return (
        <div>
            <Analytics />
            <div>
                <Chart chartType="BarChart" width="100%" height="400px" data={data} />
            </div>
        </div>
    );

Or if you wish to wrap the div that contains the chart component:

return (
        <div>
            <Analytics>
                <div>
                    <Chart chartType="BarChart" width="100%" height="400px" data={data} />
                </div>
            </ Analytics>
        </div>
    );