Which is the right way to clone component in Reactjs?

Question

I am a newbie to React. I am using react-chartjs-2 to create line chart. There are 6 different type of data with the same structure. I created a single Line chart component and cloned 5 others. Then I passed data like this:

let liveChart1 = <LiveChart1
                        name= {t('chart.30min')}
                        segmentType = {30}
                        currentTime={this.state.currentTime30}
                        predictedTime={this.state.predictedTime30}
                        density={this.state.density30}
                        predictedValue={this.state.predictedValue30}
                        same_anchor_params={this.state.same_anchor_params30}
                        prev_anchor_params={this.state.prev_anchor_params30}
                        historyData={this.state.historyData30}  
                        isFirst={this.state.isFirst}
                    />

When it is rendering and updating data, It blinks 6 times due to 6 charts. I have two problems:

• Should I create 6 different components with the same content or Should I create 1 component, clone it and pass different props as above

• Is there any methods to render 6 components at once or stop re-render the previous?

Here what I am using:

let charts = [
  liveChart1, liveChart2, liveChart3, liveChart4, liveChart5, liveChart6
];

{
  charts.map((element, index) => {
    return (<React.Fragment>{element}</React.Fragment>)
  })
}

Sorry for not providing the whole script!!!

Answer 1

This is happening because you have 6 charts in a single component and when the state of each chart is changed it is re-rendering all of the charts.

The best way is to create one child component for your chart and pass your data, title, etc through props so you can reuse this component and the re-rendering problem will be solved.