Cannot Clear Error for BarChart

[WiseNN]

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). As you can see this is the example code straight from github. Am I doing something wrong, or is this an issue?

var 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}]
    }];
        debugger;
        console.log(JSON.stringify(this.props.results));
        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;

[solomein]

@WiseNN In this example, the properties xScale and yScale are incorrect. It is d3 scales, not numbers. Try to remove them. Also, you need to pass props when you use a super()

constructor(props) {
    super(props);
}

I don't see any other errors.

[solomein]

@WiseNN You are using the wrong comment style at this place

<BarChart data={this.props.results} title={this.props.currentQuestion.q} height={window.innerHeight * 0.6} width={window.innerWidth * 0.9}/>

// doesn't work, you should use {/* code */}

[WiseNN]

Thanks, definitely forgot to pass the props in. Ill fix the comment format as well.

[WiseNN]

Correction: I did some testing, the exception throws because of the comment (which I had not expected), and because of the xScale / yScale props.Removing them completely solves this issue. Thanks again.

[codesuki]

@solomein thank you! Your help is appreciated :) Are you still working on the fixes you told me? I will merge any pullreqs :)

@WiseNN I am glad the problem is fixed! Good luck :)

[solomein]

@codesuki I have no time at the moment 😪

[codesuki]

@solomein same for me :( Let me know in case you are making some changes :)