Rendering multiple charts with React

Question

I am a newbie to React, Highcharts and UI developing in general. I would like to render multiple charts from an array of data. Currently, the page displays only the last chart - from the last data in the array.

function chartToRender(seriesArr){
//console.log(JSON.stringify(application));
 var Chart = React.createClass({
     // When the DOM is ready, create the chart.
     componentDidMount: function() {
       // Extend Highcharts with modules
       if (this.props.modules) {
         this.props.modules.forEach(function(module) {
           module(Highcharts);
         });
       }
       // Set container which the chart should render to.
       this.chart = new Highcharts[this.props.type || "Chart"](
         this.props.container,
         this.props.options
       );
     },
     //Destroy chart before unmount.
     componentWillUnmount: function() {
       this.chart.destroy();
     },
     //Create the div which the chart will be rendered to.
     render: function() {
       return React.createElement('div', {
         id: this.props.container
       });
     }
   }), element2;



return seriesArr.map(application => 
 element2 = React.createElement(Chart, {
     container: 'stockChart',
     type: 'stockChart',
     options: {
       rangeSelector: {
         selected: 0
       },
       title: {
         text: application.app_name + ' application Free Memory'
       },
       tooltip: {
         style: {
           width: '200px'
         },
         valueDecimals: 4,
         shared: true
       },
       xAxis:{
         type:'datetime',
         //categories : timeSeries,
         dateTimeLabelFormats : {
             millisecond: '%Y-%m-%dT%H:%M:%S.%L'
         }
       },
       yAxis: {
         title: {
           text: 'Free Memory'
         }
       },
       series: application.series
     }
   })

)

 }

Currently, I am calling this function through the render function on the class

render() {

    var seriesArr = getSeriesArr(this.props)


    return(

    <div>
        <div className="row">
            <ul>            
                {chartToRender(seriesArr)}
            </ul>
        </div>
    </div>                   

    )
}

How can I display all the charts on the page one below the other? the "seriesArr" variable has all the data required to render the charts.

Answer 1

Try pushing your dynamically created Chart components into an array and then render the array. That should get you going in the right direction.

 let charts =[];
    charts =   seriesArr.map(application => 
    element2 = React.createElement(Chart, {
     container: 'stockChart',
     type: 'stockChart',
     options: {
       rangeSelector: {
         selected: 0
       },
       title: {
         text: application.app_name + ' application Free Memory'
       },
       tooltip: {
         style: {
           width: '200px'
         },
         valueDecimals: 4,
         shared: true
       },
       xAxis:{
         type:'datetime',
         //categories : timeSeries,
         dateTimeLabelFormats : {
             millisecond: '%Y-%m-%dT%H:%M:%S.%L'
         }
       },
       yAxis: {
         title: {
           text: 'Free Memory'
         }
       },
       series: application.series
     }
   })    
    )

render() {   

     return(

        <div>
            <div className="row">
                <ul>            
                    {charts}
                </ul>
            </div>
        </div>                   

        )
    }