react d3 graph errors

Question

I have two graphs, one I am making by calling an api and getting the data out of it and the other one by manipulating the data of it.

import React, { Component } from 'react';
import * as d3 from 'd3';
import * as ReactD3 from 'react-d3-components';
import propTypes from 'prop-types';
var axios=require('axios');
var BarChart=ReactD3.BarChart;
var PieChart=ReactD3.PieChart;

class App extends Component {
  constructor(props){
    super(props);
    this.state={
      data:[],
      label:'Monthly Dates',
      label1: 'test',
      values:[],
      abc: [],
      x:'',
      y:''
    }
  }

  componentDidMount(){
   this.loadData();     
  }

  loadData(){   
      var me=this;
       axios({
          method:'GET',
          url:'https://www.alphavantage.co/query?function=TIME_SERIES_DAILY&symbol=SPY&apikey=2QEL3WC4KITIBISR',
        }).then(function(response){
          const values=[];
          if(response && response.data && response.data['Time Series (Daily)']){
            Object.keys(response.data['Time Series (Daily)']).forEach((keys)=>{
              if (keys) {
                const pointValue={
                  x:String(keys),
                  y:Number(response.data['Time Series (Daily)'][keys]['4. close'])
                }
                values.push(pointValue);
              }
            })
            me.setState({
              values: values
            });
          }
          me.getHistogramData(response);

        }).catch(function(error){
          console.log(error);
        })
    }

    getGraphData(){
      const {label,values} = this.state;
      return [{label,values}];
    }

    test() {
      if(this.state.abc.length){
        const {label1,abc} = this.state;
        return [{label1,abc}];
      }
      return null;
    }

    getHistogramData(response){
      var diff=0;
     if(response && response.data && response.data['Time Series (Daily)']){
        const diffValue=[];
        var keysArr = Object.keys(response.data['Time Series (Daily)']);
        var oldObj = 0;
        keysArr.map((eachObj) => {
          var newObj = response.data['Time Series (Daily)'][eachObj]['4. close'];
          var diff = newObj - oldObj;
          console.log("Difference: ", diff);
          oldObj = newObj;
          const values1={
            x:'abc',
            y: 1
          }
          diffValue.push(values1);
        })

        this.setState({
          abc: diffValue
        });
     } 
    }

  renderGraph(){
    if((this.state.values && this.state.values.length) || (this.state.abc && this.state.abc.length)){
      return(
        <div>
          <BarChart data={this.getGraphData()} width={17000} height={500} margin={{top:10,bottom:80,left:30,right:30}}/>
           <BarChart data={this.test()} width={17000} height={500} margin={{top:10,bottom:80,left:30,right:30}}/>
        </div>
        )
    }
  }

  render() {

    return (
      <div>
        {this.renderGraph()}
      </div>
    )
  }
}

App.propTypes={
    values:React.PropTypes.array,
    xScale:React.PropTypes.number,
    width:React.PropTypes.number
}

export default App;

While the first graph gets plotted by the function getGraphData(), the other one doesn't.

When the code gets executed, I get the error

TypeError: Cannot read property 'map' of undefined

It's the same code for both the components but one of them doesn't work.

What is wrong here?

Answer 1

You need to manage states as per your graph as you said, it needs value and label fields in its BarChart component. Something like below.

state = {
  graph1: {
    label: 'Monthly Dates',
    values: [],
  },
  graph2: {
    label: 'Days',
    values: [],
  },
};

another way better, you can do just:

test() {
  const { label1, abc } = this.state;
  return [{ label: label1, values: abc }];
}