React and d3 Importing data in react Component - Cannot read property 'length' of undefined

Question

I have implemented this chart example in my application

See the image on how this is composed

The problem is that i can only show my charts correctly filled with the data if my nums data are hardcoded like this const nums = [32, 19, 47, 38, 17, 62, 94, 21, 59, 62];

export default class ChartsGrid extends React.Component{

  render() {

    const view = [480, 320];
    const trbl = [0, 0, 0, 0]
    const horizontalAxisHeight = 30;
    const verticalAxisWidth = 42;
    const nums = [32, 19, 47, 38, 17, 62, 94, 21, 59, 62];

    return (
      <div className="grid">
          <LineChart {...{view, trbl, nums, horizontalAxisHeight, verticalAxisWidth}} />
      </div>
    )
  }
};

If i declare my data as props const { nums } = this.props; in my ChartsGrid component then i get this error in my LineChart Component

TypeError: Cannot read property 'length' of undefined

This is beacuse it is complaining about the nums in the render function in LineChart

const {view, trbl, nums, horizontalAxisHeight, verticalAxisWidth} = this.props;

my nums data are actually consumible in the store (I can see it in the console)

num.js

const nums = [32, 19, 47, 38, 17, 62, 94, 21, 59, 62];

export default nums;

reducer.js

import { combineReducers } from 'redux';
import { routerReducer } from 'react-router-redux';

import nums from './nums';

const rootReducer = combineReducers({nums, routing: routerReducer });

export default rootReducer;

store

import rootReducer from './reducers/index';
const store = createStore(rootReducer);

export default store;

This the logic to store the data num.js

so why then LineChart can not read them?

You included the redux tag. Can you include your connect code that connects your component to the store? — Paul S
– Paul S, Commented Dec 11, 2016 at 17:23
This still doesn't show your component being connected to the store. If it isn't, I can provide an answer showing how it should be, but if it is, please include that code because the issue would probably be in there. — Paul S
– Paul S, Commented Dec 11, 2016 at 17:50

user1732740 · Accepted Answer · 2016-12-11 16:40:59Z

0

You can assign an empty array to avoid this issue, as below

const nums  = this.props.nums || [];

You you should check why this property is coming as null or undefined first. There must be some logical error in the part where you are assign the prop.

answered Dec 11, 2016 at 16:40

user1732740

112 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Koala7 Over a year ago

it returns empty obviously

james_womack Over a year ago

Yeah, or use a default prop of [] instead of needing to place a fallback wherever it's accessed

Collectives™ on Stack Overflow

React and d3 Importing data in react Component - Cannot read property 'length' of undefined

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related