Getting error in render function (reactjs)?

Question

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:

I'm confused--are you using a Reactified version of Chartist, e.g., github.com/fraserxu/react-chartist (which appears old, but you get the idea)? If not, you can't just randomly insert arbitrary objects into the DOM. — Dave Newton
– Dave Newton, Commented Jun 12, 2018 at 16:47
also you will get a warning on class="ct-chart". since its JavaScript, class is a reserved work and className should be used instead — azium
– azium, Commented Jun 12, 2018 at 16:57
also Pie is undefined in your first codeblock. did you mean Chart ? — azium
– azium, Commented Jun 12, 2018 at 16:58
@DaveNewton How can I add objects to DOM ? I want to use chartist.js and not react-chartist because react-chartist is just a wrapper and it does not have all features. — stone rock
– stone rock, Commented Jun 13, 2018 at 2:26
You could try dangerouslySet or one of its alternatives, or extend react-chartist, or mix react/JQuery, etc. Your alternatives are basically the same as with anything that isn't in react already. — Dave Newton
– Dave Newton, Commented Jun 13, 2018 at 9:08

illiteratewriter · Accepted Answer · 2018-06-12 17:32:56Z

1

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.

answered Jun 12, 2018 at 17:32

illiteratewriter

4,3632 gold badges26 silver badges46 bronze badges

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

1 Comment

stone rock Over a year ago

I want to use chartist.js and not react-chartist with my react component.

Collectives™ on Stack Overflow

Getting error in render function (reactjs)?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related