How to render single react component with different data?

Question

I have created Barchart component (displays barchart) which is child component. In parent component I am passing props to Barchart component. In Barchart component I am using if/else and to render the Barchart accordingly.

Barchart component:

import React, { Component } from 'react';

class Barchart extends Component {

  constructor(props){
    super(props);
  }

  componentDidMount(){

    if(this.props.statType === 'batting'){

        const data1 = {
            labels: ['XS', 'S', 'M', 'L', 'XL', 'XXL', 'XXXL'],
        series: [20, 60, 120, 200, 180, 20, 10]
        }

        const options1 = {
            width:300,
            height:300,
            distributeSeries: true
        }

        const mychart1 = new Chartist.Bar('.ct-bar-chart', data1,options1);

    }else if(this.props.statType === 'bowling'){

      const data1 = {
        labels: ['A', 'B', 'C', 'D', 'E', 'F', 'G'],
        series: [200, 600, 120, 200, 1800, 200, 100]
      }

      const options1 = {
        width:300,
        height:300,
        distributeSeries: true
      }

      const mychart1 = new Chartist.Bar('.ct-bar-chart', data1,options1);
    }
}
  render(){
    return(
         <div className="ct-bar-chart">
             {this.mychart1}
         </div>
    )}
}

export default Barchart;

Bowling component:

return(
      <div><Barchart bowldata={this.props} statType='bowling'/></div>
)

Batting component:

return(
      <div><Barchart batdata={this.props} statType='batting'/></div>
)

I am able to see barchart on batting page (i.e batting component) but on bowling page (i.e bowling component) nothing is displayed.

@niklas render() method is very large so I cannot put entire code. If possible can you share some working example on jsfiddle or sandbox. — stone rock
– stone rock, Commented Jun 30, 2018 at 6:44

Hriday Modi · Accepted Answer · 2018-06-30 06:50:48Z

1

Try using ref in while initializing graph rather than class. Consider below code:

render(){
    return(
         <div className="ct-bar-chart"
              ref={(ele) => this.chartElement = ele}>
              ...
         </div>
    )}

Now while initializing chart use:

const mychart1 = new Chartist.Bar(this.chartElement, data1,options1);

So the advantage here here is this.chartElement is unique for every component, while if you use class it can conflict with another component.

answered Jun 30, 2018 at 6:50

Hriday Modi

2,08916 silver badges22 bronze badges

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

12 Comments

stone rock Over a year ago

@Hirday Woow it works now. I am newbie and just started learning reactjs. I want to know why does adding ref works ? I had mostly used props earlier and never tried to used ref.

Hriday Modi Over a year ago

@stonerock because ref has the element which is very specific to each component you are initializing while class on which you are initializing chart may conflict with class used in another component. Hence ref works better. I will add it in my answer too.

Hriday Modi Over a year ago

No both are specific to component. So here you are passing different data to 2 component instances but the css class on which chart is initialized is same for both of them hence we used ref.

Hriday Modi Over a year ago

@stonerock Have a look at When to use refs?. Also you can use the latest way of creating ref as mentioned here. I have used functional ref as i am used to it.

Hriday Modi Over a year ago

There is third point too there Integrating with third-party DOM libraries. Which is your use-case.

|

Collectives™ on Stack Overflow

How to render single react component with different data?

1 Answer 1

12 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

12 Comments

Your Answer

Sign up or log in

Post as a guest

Related