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
– G_S, Commented Feb 25, 2018 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
– Sokratis V, Commented Feb 25, 2018 at 14:40
Where are you getting props from for topdata ? I doubt if thats a stateless component — G_S
– G_S, Commented Feb 25, 2018 at 14:43
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
– Kunukn, Commented Feb 25, 2018 at 15:19

Miguel Calderón · Accepted Answer · 2018-02-25 17:08:10Z

0

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>
    )
  }
}

answered Feb 25, 2018 at 17:08

Miguel Calderón

3,1011 gold badge20 silver badges19 bronze badges

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

Collectives™ on Stack Overflow

Undefined values when try to Insert array in component

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related