Multiple plotly graphs not showing up on webpage

Question

I'm trying to follow the tutorial here to add graphs to webpages: http://academy.plot.ly/react/3-with-plotly/. However, I am running into multiple issues. It does not look like the data points are being rendered on the plotly graph, and the second and third graphs I wish to display are not showing. I cannot figure out where the problems are coming from. My Plot class is here:

import React from 'react';

export default class Plot extends React.Component {
  constructor(props){
      super(props);
      this.state = {
        dates: [1, 2, 3],
        temps: [1, 2, 3],
        type: "scatter",
        plot_id: "plot"
      };
  }

  drawPlot() {
    Plotly.newPlot(this.state.plot_id, [{
      x: this.props.xData,
      y: this.props.yData,
      type: this.props.type
    }], {
      margin: {
        t: 0, r: 0, l: 30
      },
      xaxis: {
        gridcolor: 'transparent'
      }
    }, {
      displayModeBar: false
    });
  }

  componentDidMount() {
    this.drawPlot();
  }

  componentDidUpdate() {
    this.drawPlot();
  }

  render() {
    return (
      <div id={this.state.plot_id}></div>
    );
  }

}

My equivalent of the App.js file is here:

import React from 'react';
import Plot from './Plot';

export default class Analytics extends React.Component {
  constructor(props){
      super(props);
      this.state = {
      };
  }

  render() {
    return (
      <div>
        <div>
          <h2>Graph 1</h2>
          <Plot
            x = {[1,2,4]}
            plot_id={"Plot1"}
          />
        </div>
        <div>
          <h2>Graph 2</h2>
          <Plot
            x={[0,1,2]}
            y={[2,3,6]}
            type={"bar"}
            plot_id={"Plot2"}
          />
        </div>
          <div>
            <h2>Graph 3</h2>
            <Plot
              x={[0,1,2,3,4]}
              y={[2,3,6,6,7]}
              type={"bar"}
              plot_id={"Plot3"}
            />
          </div>
      </div>
    );
  }

}

The output right now looks like this:

Answer 1

Since you're passing the plot_id as props, try changing the following lines in your Plot class to this.props.plot_id instead of this.state.plot_id:

Plotly.newPlot(this.state.plot_id, [{
...
<div id={this.state.plot_id}></div>