title: Chart JS will not re-render in React
body: <p>I'm having trouble getting my Chart from Chart.js to update. I'm using React so it should re-render every time I modify my state, however it is not behaving the way I would like.</p>
  
  <p>Here is my code: </p>
  
  <pre><code>import React from 'react';
  import { Line } from 'react-chartjs-2';
  import { chartData } from './Search.js';
  import { xLabels } from './Search.js';
  import { allEpsData } from './Search.js';
  
  let chartDataSeason = [];
  let xLabelsSeason = [];
  
  
  export class Graph extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        selectValue: '',
        seasonSelected: false,
        chartIt: {
          labels: xLabels,
          datasets: [
            {
              label: 'Rating',
              data: chartData,
              fill: false,
              borderColor: '#00B4CC',
            },
          ],
        },
        chartItSeason: {
          labels: xLabelsSeason,
          datasets: [
            {
              label: 'Rating',
              data: chartDataSeason,
              fill: false,
              borderColor: '#00B4CC',
            },
          ],
        },
      };
      this.handleChange = this.handleChange.bind(this);
    }
    handleChange(e) {
      chartDataSeason = [];
      xLabelsSeason = [];
      let seasonNum = e.target.value.slice(6)
      console.log(seasonNum);
  
      for (let i = 0; i &lt; allEpsData[seasonNum-1].length; i++){
        chartDataSeason.push(allEpsData[seasonNum-1][i].imdbRating);
        xLabelsSeason.push(`s${seasonNum}e${allEpsData[seasonNum-1][i].Episode} "${allEpsData[seasonNum-1][i].Title}"`)
      }
  
      this.setState({
        selectValue: e.target.value,
        seasonSelected: true,
      });
  
      // console.log(chartDataSeason)
  
    }
    render() {
      let seasons = [];
      for (let i = 0; i &lt; allEpsData.length; i++) {
        seasons.push(i);
      }
  
      if (this.state.seasonSelected === false) {
        return (
          &lt;div&gt;
            &lt;select // selector
              className="select" 
              value={this.state.selectValue}
              onChange={this.handleChange}
            &gt;
              &lt;option&gt;All Seasons&lt;/option&gt;
              {seasons.map((el) =&gt; {
                return &lt;option key={el}&gt;season {el+1}&lt;/option&gt;;
              })}
            &lt;/select&gt;
            &lt;div className="line-container"&gt;
              &lt;Line
                data={this.state.chartIt}
                width={600}
                height={400}
                options={{
                  maintainAspectRatio: false,
                  scales: {
                    xAxes: [
                      {
                        ticks: {
                          display: false, //this will remove only the label
                        },
                        gridLines: {
                          show: false,
                          display: false,
                        },
                      },
                    ],
                    yAxes: [
                      {
                        gridLines: {
                          show: false,
                          drawBorder: false,
                        },
                      },
                    ],
                  },
                  animation: {
                    duration: 200,
                    easing: 'easeInOutQuart',
                  },
                  tooltips: {
                    enabled: true,
                  },
                }}
              /&gt;
            &lt;/div&gt;
            &lt;div className="seasons-graph-container"&gt;&lt;/div&gt;
          &lt;/div&gt;
        );
      }
      else {
        return (
          &lt;div&gt;
            &lt;select
              className="select"
              value={this.state.selectValue}
              onChange={this.handleChange}
            &gt;
              &lt;option&gt;All Seasons&lt;/option&gt;
              {seasons.map((el) =&gt; {
                return &lt;option key={el}&gt;season {el+1}&lt;/option&gt;;
              })}
            &lt;/select&gt;
            &lt;div className="line-container"&gt;
              &lt;Line
                data={this.state.chartItSeason}
                width={600}
                height={400}
                options={{
                  maintainAspectRatio: false,
                  scales: {
                    xAxes: [
                      {
                        ticks: {
                          display: false, //this will remove only the label
                        },
                        gridLines: {
                          show: false,
                          display: false,
                        },
                      },
                    ],
                    yAxes: [
                      {
                        gridLines: {
                          show: false,
                          drawBorder: false,
                        },
                      },
                    ],
                  },
                  animation: {
                    duration: 200,
                    easing: 'easeInOutQuart',
                  },
                  tooltips: {
                    enabled: true,
                  },
                }}
              /&gt;
            &lt;/div&gt;
            &lt;div className="seasons-graph-container"&gt;&lt;/div&gt;
          &lt;/div&gt;
        );
      }
    }
  }
  </code></pre>
  
  <p>So right now, <code>chartIt</code> displays a graph and that works fine. However in the <code>handleChange(e)</code> method, I am trying to reset the data the Chart.js calls from by first setting <code>chartDataSeason = []</code>; and then <code>xLabelsSeason = [];</code>.</p>
  
  <p>I am able to console.log the data and it is all there, I am unable to get it to render in a new Line chart though. </p>
  
  <p>Any help would be appreciated. Also any tips on better organizing my code would be helpful, I am pretty new to React and I realize there is probably a better way to do all of this. </p>