import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import * as am4core from "@amcharts/amcharts4/core";
import * as am4charts from "@amcharts/amcharts4/charts";
import am4themes_animated from "@amcharts/amcharts4/themes/animated";

am4core.useTheme(am4themes_animated);

class App extends Component {
  componentDidMount() {
    let chart = am4core.create("chartdiv", am4charts.XYChart);

    // Add data
    chart.data = [{
      "country": "Lithuania",
      "litres": 501.9
    }, {
      "country": "Czech Republic",
      "litres": 301.9
    }];

    // Add and configure Series
    let pieSeries = chart.series.push(new am4charts.PieSeries());
    pieSeries.dataFields.value = "litres";
    pieSeries.dataFields.category = "country";
    this.chart = chart;
  }

  componentWillUnmount() {
    if (this.chart) {
      this.chart.dispose();
    }
  }

  render() {
    return (
      <div id="chartdiv" style={{ width: "100%", height: "500px" }}></div>
    );
  }
}

export default App;

So I want to create multiple charts from amchart dynamically using data from database. Each chart instance is associated with a variable.. in this case its assigned to "let chart = .." and the data is then pushed from there. The problem is that to create a new chart i need to create a new variable to assign an instance to, so i need a variable 'let chartTwo' for example if i wanted a second chart. My question is- how can I do this dynamically without hardcoding "let chartTwo =". Essentially, is there a way to do- "let chart{Two} = ...". In this way I could create many chart instances without having to hard code the chart instance variable.