title: Why is the child component updating but not re-render Reactjs
body: <p>I have a main component with a child chart component. On connecting to a websocket, the main component updates the state of the child chart component. This however does not redraw. When I click on the chart however, the labels appear, and when I click again, the values appear with the labels.</p>
  
  <p>Main.js:</p>
  
  <pre><code>import IO from 'socket.io-client';
  import React from "react";
  
  import { Switch, Route } from 'react-router-dom';
  import { Chart } from "./Chart";
  
  let ftse100Tickers = require('./ftse_100_tickers.json');
  let randomInt = Math.floor(Math.random() * ftse100Tickers.tickers.length);
  
  /**
   * Main application component which contains
   */
  export class Main extends React.Component {
      componentWillMount() {
          this.socket = IO(location.protocol + "//" + document.domain + ":" + location.port);
          this.socket.on("connect", (() =&gt; this.connect()));
          this.socket.on("disconnect", (() =&gt; this.disconnect()));
          this.socket.on("initial data", ((data) =&gt; this.createInitialChart(data)))
      }
  
      connect(){
          this.setState({status: 'connected'});
          this.socket.emit("get initial data", this.state.ticker);
      }
  
      disconnect(){
          this.setState({status: 'disconnected'})
      }
  
      createInitialChart(data){
          let tempErrorChart= this.state.errorChart;
          for (let row of data){
              tempErrorChart.labels.push(row.time_stamp);
              tempErrorChart.datasets[0].data.push(row.error);
          }
          this.setState({errorChart: tempErrorChart});
      }
  
  
      constructor(props){
          super(props);
          this.state = {
              errorChart: {
                  labels: [],
                  datasets: [
                      {
                          label: 'Error',
                          data: [],
                      },
                  ]
              },
              status: 'disconnected',
              ticker : ftse100Tickers.tickers[randomInt],
              twitter : ftse100Tickers.twitter[randomInt]
          }
      }
      render() {
          return (
              &lt;div className="row"&gt;
                  &lt;div className="row"&gt;
                      &lt;div className="col-lg-6"&gt;
                          &lt;div className="card border-0"&gt;
                              &lt;div className="card-body"&gt;
                                  &lt;Chart chart={this.state.errorChart}/&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          )
      }
  }
  </code></pre>
  
  <p>The chart component is as so:</p>
  
  <p>Chart.js</p>
  
  <pre><code>import { Line } from "react-chartjs-2"
  import React from "react";
  
  /*
   * General charting component used for rendering charts
   */
  export class Chart extends React.Component {
  
      render() {
          return (
              &lt;Line data={this.props.chart} options={{}}/&gt;
          )
      }
  }
  </code></pre>