title: React passing a variable object to setState vs. an anonymous object to setState
body: <p>I was having issues rendering a chart after state has been updated by the data fetched from an API.</p>
  
  <pre><code>import React, { Component } from 'react';
  import { Bar, Line, Pie } from 'react-chartjs-2';
  
  export default class PopChart extends Component {
    constructor(props) {
      super(props);
  
      this.state = {
        chartData: {
          labels: [],
          datasets: [
            {
              label: 'AAA',
              data: [],
              backgroundColor: []
            }
          ]
        }
      };
    }
  
    url = 'api_url';
  
    componentDidMount() {
      fetch(this.url)
        .then(response =&gt; {
          this.setState({
            httpStatusCode: response.status,
            httpStatusOk: response.ok
          });
          if (response.ok) {
            return response.json();
          } else if (response.status === 404) {
            // Not found
            throw Error('HTTP 404, Not found');
          } else {
            throw Error(`HTTP ${response.status}, ${response.statusText}`);
          }
        })
        .then(responseData =&gt; {
          console.log('Then function');
  
          this.setChartProperties(responseData);
        })
        .then(() =&gt; {
          this.setState({ loading: false });
        })
        .catch(error =&gt; {
          console.log(error);
        });
    }
  
    setChartProperties = data =&gt; {
      this.setChartData(data);
      // this.setChartXAxis(data);
    };
  
    setChartData = data =&gt; {
      let hours = data.map(event =&gt; event.hour);
      hours = hours.splice(0, 10);
      const { chartData } = { ...this.state };
  
      const chartDataUpdate = chartData;
      chartDataUpdate['datasets'].data = hours;
  
      // Working version
      // this.setState({
      //   chartData: {
      //     labels: ['a', 'a', 'a', 'a', 'a', 'a', 'a'],
      //     datasets: [
      //       {
      //         label: 'AAA',
      //         data: hours,
      //         backgroundColor: []
      //       }
      //     ]
      //   }
      // });
  
      // Not working version
      this.setState({ chartData: chartDataUpdate });
    };
  
  
  
    render() {
     &lt;Bar data={this.state.chartData} /&gt;;
    }
  }
  
  </code></pre>
  
  <p>At first I thought the issue was regarding the asynchronous nature of <code>fetch()</code> and the <code>&lt;Bar/&gt;</code> component from Chart.js was being rendered before the state got a chance to get updated. However, when I logged out the state, on the console it showed my state with the changed values. However, the chart did not display any of the values.</p>
  
  <p>When I called <code>setState()</code> and passed an anonymous object (refer to the commented out working version of <code>setState()</code>), the chart displayed the values.</p>
  
  <p>Why does it not work when I stored the fetched data into a variable and pass it as an argument for <code>setState()</code>?</p>