Undefined values when try to Insert array in component

Question

I'm trying to pass an array as data from a json file:

[
  {
    "label": "label 1",
    "color": "#FFF000",
    "data": [
      {"x": "Day 1", "y": 69},
      {"x": "Day 2", "y": 71},
      {"x": "Day 3", "y": 45},
      {"x": "Day 4", "y": 72},
    ]
  }, {
    "label": "Overall Score",
    "color": "#444001",
    "datapoints": [
      {"x": "Day 1", "y": 48},
      {"x": "Day 2", "y": 57},
      {"x": "Day 3", "y": 50},  
      {"x": "Day 4", "y": 80, "tooltip": "Good Job!"}
    ]
  } ]

With Chartjs and according to the using array values in chart.js data and label field my component code is as follows:

import React, {Component} from 'react';
import {Line} from 'react-chartjs-2';

var topdata = this.props.graphData[0].map((graph, i) => {
  var color_top_data = graph.color;
  var label_top_data = graph.label;

  graph.datapoints.map((row, i) => {
    var day_top_data = row.x;
    var value_top_data = row.y;
  });
});

class LineChart extends Component {

  render() {
    return (
        <div>
           <Line
          data={{
            labels: day_top_data,

            datasets: [
              {
                data: value_top_data,
                backgroundColor: color_top_data,
                fill: false,
                lineTension: 0.4,
              }]
}} />
</div>
    );
  }
}

export default LineChart;

But in react it fails to compile cause color_top_data, day_top_data, value_top_data are not defined. Can someone help with this?

Declare var day_top_data; var value_top_data; globally should work — G_S, Feb 25 '18 at 14:35
@G_S I tried and it shows `Cannot read property 'GraphData' of undefined` so i guess the issue is cause ```this.props.graphData[0]``` is not defined (does not pass the values to `this.props.graphData[0]` — Sokratis V, Feb 25 '18 at 14:40
Where are you getting props from for topdata ? I doubt if thats a stateless component — G_S, Feb 25 '18 at 14:43
@G_S from a parent component and pass it as ` ` @Aaqib i tried also `var topdata = if(this.props.agentGraphData){ this.props.graphData[0].map((graph, i) => { ... } }); }` but it shows `unexpected token` on in the posiiton of IF — Sokratis V, Feb 25 '18 at 14:51
LineChart is another component. You are not passing your data as props to topdata (if its a component. I still doubt it) — G_S, Feb 25 '18 at 14:54
@G_S if you read my first comment the original problem is that GraphData array is undefined that's becuase sometimes there are timing issues when an object has already values or not (in this case it hasn't ), so when i try to take data from day_top_data there is nothing because this.props.GraphData has also nothing.. — Sokratis V, Feb 25 '18 at 14:59
this line `var topdata = this.props.graphData[0].map((graph, i) => {` You are trying to use this.props outside a React component. You should use `this.props` inside a React class component. — Kunukn, Feb 25 '18 at 15:19
As others have already pointed out, you canonly use your component props from the component code itself. Also, it's not clear what are you trying to do in your `topdata` declaration; your nested `.map` callbacks are not returning anything, therefore the resulting array will be populated by undefined values whatever `props` you pass in. — Miguel Calderón, Feb 25 '18 at 15:47
@Miguel I have one parent component where i pass this : ` { this.state.firstgraphData && ( )}` then in ProfileWidget (1st child) i pass this : ` {this.props.graph && }` so i can pass the value of the JSON file above to the last child LineChart — Sokratis V, Feb 25 '18 at 15:55

score 0 · Answer 1 · answered Feb 25 '18 at 17:08

Based on your code and comments, this is what I think you're trying to achieve:

import React, {Component} from 'react';
import {Line} from 'react-chartjs-2';

class LineChart extends Component {
  render() {
    const labels = this.props.GraphData.data.map(point => point.x)
    const data = this.props.GraphData.data.map(point => point.y)
    return (
      <div>
        <Line
          data={{
            labels,
            datasets: [{
              data,
              backgroundColor: this.props.GraphData.color,
              fill: false,
              lineTension: 0.4
            }]
          }} />
      </div>
    )
  }
}

Undefined values when try to Insert array in component

1 Answers1