Uncaught TypeError: Cannot use 'in' operator to search for 'data' in undefined

Hi,

I am new to react and I am trying to use react-easy-charts for my application. I tried to use multiple PieCharts and I encountered the error:

Uncaught TypeError: Cannot use 'in' operator to search for 'data' in undefined

I am also using redux and axios to get my data. I can get the data well and display it in 1 chart. but when I tried to use multiple charts, I'm having issues.

Here's my sample code:

import React from 'react';
import { PieChart, Legend } from 'react-easy-chart';
import { connect } from 'react-redux';
import { fetchPieOne, fetchPieTwo } from '../actions/PieActions';

@connect((store) => {
  return {
    pieOne: store.pieOne,
    pieTwo: store.pieTwo
  };
})

export default class ShowCharts extends React.Component {

  componentWillMount() {
    this.props.dispatch(fetchPieOne())
    this.props.dispatch(fetchPieTwo())
  }

  render(){

    const { pieOne, pieTwo } = this.props;

    return (
      <div>
        <div>
            <h4>Pie One</h4>
            <PieChart
              size={170}
              innerHoleSize={80}
              data={pieOne.data}
            />
            <Legend data={pieOne.data} dataId={'key'} horizontal  />
        </div>
        <div>
            <h4>Pie Two</h4>
            <PieChart
              size={170}
              innerHoleSize={80}
              data={pieTwo.data}
            />
            <Legend data={pieTwo.data} dataId={'key'} horizontal  />
        </div>
      </div>
    );
  }
}

I also tried to pass some data coming from a variable like below and use it in one chart, but when I tried to use the same variable to another pie in the same component , the same issue appears. Is this a limitation?

const pieData = [
  { key: 'A', value: 85 },
  { key: 'B', value: 15 }
];

Thank you in advance! :)

experience-experiments / react-easy-chart

Uncaught TypeError: Cannot use 'in' operator to search for 'data' in undefined #84