rizers rizers - 10 months ago 50
React JSX Question

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

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?

BarChart from Github react-d3-components
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



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

<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}/>
title="Answer Results"
margin={{top: 10, bottom: 50, left: 50, right: 10}} />

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


module.exports = board;

Answer Source

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.