Dygraphs works in react, kind of, but not with generated divs

[John Bleichert]

Dygraphs works fine in React with hardcoded DIV IDs if I create the dygraphs within componentDidMount().

I need to generate divs on-the-fly which will contain dygraphs. However with the code below I am getting the dreaded non-existent div error from dygraphs at compile time. If I hard-code "Chart_0" as shown (div ID and dygraph target) everything works well.

How do I time this correctly in react? I have no idea of knowing how many divs and charts will be needed at compile time, this has to be decided at run time.

Going by the console.log() statements in the code, in the javascript console I see:

render() chart = Chart_0

componentDidMount() chart = Chart_0

render() chart = Chart_0

componentDidMount() chart = Chart_0

so the div is being created and id'd before the dygraph, as planned. What am I missing?

class PlotCharts extends Component {

  componentDidMount = () => {

    var ordered = {};
    Object.keys(this.props.plots.charts).sort().forEach((key) => {
      ordered[key] = this.props.plots.charts[key];
    });

    for ( let chart in ordered ) {
      // chart = Chart_0, Chart_1, etc.
      console.log("componentDidMount() chart = " + chart);
      let sigList = Object.keys(this.props.plots.charts[chart]);
      sigList.forEach((signal) => {
        let localData = this.props.plots.charts[chart][signal];
        new Dygraph (
          chart, // Chart_0
          localData,
          {
            labels: ["MessageTime", signal],
            axes: {
              x: {
                axisLabelFormatter: function(ms) {
                  let d = new Date(ms);
                  let hour = d.getUTCHours();
                  let mins = d.getUTCMinutes();
                  let secs = d.getUTCSeconds();
                  let msec = d.getUTCMilliseconds();

                  return hour + ":" + mins + ":" + secs + "." + msec;
                }
              }
            }
          }
        )
      });
    }
  }

  render() {

    var plots = [];

    let chartList = Object.keys(this.props.plots.charts).sort();

    for ( let chart in chartList ) {
      console.log("render() chart = " + chartList[chart]);
      plots.push(
        <div
          id={chart}  // Chart_0
          key={chartList[chart]}
        >
        </div>
      );
    }

    return (
      <div>
        { plots }
      </div>
    )

  }

}