CODEWITHSUNDEEP
javascriptreactjs
stone rock
stone rock

Reputation: 1953

Getting error in render function (reactjs)?

I am trying to use chartist.js with my react component.I am not able to show Pie chart in my react component.

Chartist.js -> https://gionkunz.github.io/chartist-js/getting-started.html

Pie.js:

import React, { Component } from 'react';

    var data = {
      // A labels array that can contain any sort of values
      labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
      // Our series array that contains series objects or in this case series data arrays
      series: [
        [5, 2, 4, 2, 0]
      ]
    };

    // Create a new line chart object where as first parameter we pass in a selector
    // that is resolving to our chart container element. The Second parameter
    // is the actual data object.
   const mychart =  new Chartist.Line('.ct-chart', data);

class Pie extends Component {

  render(){
    return(
      <div>
          <div class="ct-chart ct-perfect-fourth">
          {mychart}

          </div>
      </div>

    )}

}

export default Pie;

Parent component:

render(){
      return(
<div>
      <Pie/>
</div>     
  )
}

I am importing Pie.js inside my parent component but I am getting error saying objects should be array and not objects i.e objects are not valid react child. see screenshot: enter image description here

Upvotes: 0

Views: 214

Answers (1)

illiteratewriter
illiteratewriter

Reputation: 4323

There are multiple issues with the code as @azium has mentioned, first in Reactjs, we use className instead of using class since class is a reserved keyword in javascript. Secondly in the first code block, you've given the class name as Chart and has exported Pie.

So to get things up and running, firstly use Chartist for reactjs, and do things as mentioned in the docs (like adding css). Instead of import ChartistGraph from '../index';, you can do import ChartistGraph from 'react-chartist'. So a working Chart component will look something like this

import React, { Component } from 'react';
import ChartistGraph from 'react-chartist'
    var data = {
      // A labels array that can contain any sort of values
      labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
      // Our series array that contains series objects or in this case series data arrays
      series: [
        [5, 2, 4, 2, 0]
      ]
    };
    var data = {
      labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
      series: [
        [5, 2, 4, 2, 0]
      ]
    };
    var options = {
      high: 10,
      low: -10,
      axisX: {
        labelInterpolationFnc: function(value, index) {
          return index % 2 === 0 ? value : null;
        }
      }
    };
    var type = 'Bar'
class Pie extends Component {
  render(){
    return(
      <div>
        <ChartistGraph data={data} options={options} type={type} />
      </div>
    )}
}
export default Pie;

Also add this to your parent component.

Upvotes: 1

Related Questions