Cannot Clear React D3 Component Error for BarChart: "Cannot read property 'map' of undefined"

Question

I am getting a recurring type error in bundle.js file.

"Cannot read property 'map' of undefined" in bundle.js for BarChart An object is undefined and trying to map to an array, but I am not sure where this is coming from because the failure is in a minified script (in bundle.js). I am not trying to map anything, and the data param has requested an array. This bar chart code is straight from an example on github (see below). Am I doing something wrong, or is this an issue?

Repo With Example BarChart

My Code:

React =  require('react');
var ReactDOM = require('react-dom');
var Display = require('./parts/display');
var d3 = require('d3');
var BarChart = require('react-d3-components').BarChart;
var scope;

class board extends React.Component
{
constructor()
{
    super()

    scope=this;


}
render()
{

        var data = [{
    label: 'Answer',
    values: [{x: 'SomethingA', y: 10}, {x: 'SomethingB', y: 4}, {x: 'SomethingC', y: 3}]
}];

    return(
            <div id='scoreboard'>

                <Display if={this.props.status === 'connected' && this.props.currentQuestion.q}>
                // <BarChart data={this.props.results} title={this.props.currentQuestion.q} height={window.innerHeight * 0.6} width={window.innerWidth * 0.9}/>
                 <BarChart
                         data={data}
                         width={400}
                        height={400}
                        title="Answer Results"
                        xScale={1}
                        yScale={1}
                        margin={{top: 10, bottom: 50, left: 50, right: 10}} />
                </Display>

                <Display if={this.props.status === 'connected' && !this.props.currentQuestion.q}>
                <h3>Awaiting a Question...</h3>
                </Display>


            </div>
        );
}
}

 module.exports = board;

Answer 1

Running your code throws a couple of errors for me, all are caused because xScale and yScale properties should be functions (not numbers). If you fix that (note that in the original example they are not set), it should work.

Additionally, you should always give your React components names starting with capital letters. Tags that start with lower case are supposed to represent original HTML elements (eg. <div>, <textarea>, etc.), not your custom ones.