title: Can only update a mounted or mounting component.
body: <p>Currently working on a personal project and i'm getting this error </p>
  
  <p><code>Warning: Can only update a mounted or mounting component. This usually means you called setState, replaceState, or forceUpdate on an unmounted component. This is a no-op. Please check the code for the Graph component.</code></p>
  
  <p>I also get the same issue for my <code>App component.</code> I've done some reading on what the issue could be, but i'm non the wiser as to what the issue is with my code specifically.  </p>
  
  <p>Any insight would be greatly appreciated. </p>
  
  <p>Here is a link to the <a href="https://codesandbox.io/s/qv5vl50j1w" rel="nofollow noreferrer">running project (with sourcecode) on CodeSnadbox.io</a> I've linked the offending code below as well. </p>
  
  <p>Here is the <code>Graph Component</code></p>
  
  <pre><code>import React, { Component } from "react";
  import { render } from "react-dom";
  import { Line, Doughnut, Bar } from "react-chartjs-2";
  import moment from "moment";
  import PropTypes from "prop-types";
  
  import styleConstants from "../misc/style_constants.js";
  
  class Graph extends Component {
    constructor(props) {
      super(props);
      this.state = {
        label: "default",
        dataset: [],
        labels: []
      };
    }
  
    /**
     * https://min-api.cryptocompare.com/ for documentation
     */
    async getHistoryData(ticker = "BTC", currency = "USD", filter = "close") {
      try {
        let response = await fetch(
          `https://min-api.cryptocompare.com/data/histoday?fsym=${ticker}&amp;tsym=${currency}&amp;limit=60&amp;aggregate=3&amp;e=CCCAGG`
        );
        const responseJson = await response.json();
        const dataset = responseJson.Data.map(data =&gt; {
          return data[filter];
        });
        const labels = responseJson.Data.map(data =&gt; {
          return moment(new Date(data.time * 1000)).format("MMM Do YY");
        });
  
        this.setState({ dataset: dataset });
        this.setState({ labels: labels });
      } catch (error) {
        console.log(error);
      }
    }
  
    componentDidMount() {
      const { ticker, currency, filter } = this.props;
      this.getHistoryData(ticker, currency, filter);
    }
  
    render() {
      const { label, graphType } = this.props;
      const { dataset, labels } = this.state;
  
      const options = {
        legend: {
          fontColor: styleConstants.get("Dark")
        },
        scales: {
          yAxes: [
            {
              ticks: {
                fontColor: styleConstants.get("Light"),
                beginAtZero: true,
                callback: function(value, index, values) {
                  if (parseInt(value) &gt;= 1000) {
                    return (
                      "$" + value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")
                    );
                  } else {
                    return "$" + value;
                  }
                }
              }
            }
          ],
          xAxes: [
            {
              ticks: {
                fontColor: styleConstants.get("Light"),
                fontSize: 10,
                stepSize: 1,
                beginAtZero: true
              }
            }
          ]
        }
      };
  
      const data = {
        labels: labels,
        datasets: [
          {
            label: label,
            fill: true,
            lineTension: 0.1,
            backgroundColor: styleConstants.get("Medium"),
            borderColor: styleConstants.get("Medium"),
            borderCapStyle: "butt",
            borderDash: [],
            borderDashOffset: 0.0,
            borderJoinStyle: "miter",
            pointBorderColor: styleConstants.get("Light"),
            pointBackgroundColor: "#fff",
            pointBorderWidth: 1,
            pointHoverRadius: 5,
            pointHoverBackgroundColor: "rgba(75,192,192,1)",
            pointHoverBorderColor: "rgba(220,220,220,1)",
            pointHoverBorderWidth: 2,
            pointRadius: 1,
            pointHitRadius: 10,
            data: dataset
          }
        ]
      };
      return &lt;Line data={data} options={options} /&gt;;
      // switch (graphType) {
      //   case "line":
      //     return &lt;Line data={data} options={options} /&gt;;
      //     break;
      //   case "bar":
      //     return &lt;Bar data={data} options={options} /&gt;;
      //     break;
      //   case "doughnut":
      //     return &lt;Doughnut data={data} options={options} /&gt;;
      //     break;
      //   default:
      //     return null;
      // }
    }
  }
  
  Graph.propTypes = {
    label: PropTypes.string,
    graphType: PropTypes.string
  };
  
  Graph.defaultProps = {
    label: "Default String",
    graphType: "Default String"
  };
  
  export default Graph;
  </code></pre>
  
  <p>Here is the App Component also</p>
  
  <pre><code>import React, { Component } from "react";
  import { render } from "react-dom";
  
  import styled, { css } from "styled-components";
  
  import styleConstants from "../misc/style_constants.js";
  
  import Overview from "../components/Overview";
  import Panel from "../components/Panel";
  import Table from "../components/Table";
  
  import Options from "./Options";
  import Graph from "./Graph";
  
  export default class App extends Component {
    constructor(props) {
      super(props);
      this.state = {
        selectedTicker: "BTC",
        currency: "USD",
        tickers: [],
        overview: []
      };
      this.updateTicker = this.updateTicker.bind(this);
      this.createGraph = this.createGraph.bind(this);
    }
  
    updateTicker(selectedValue) {
      const { value } = selectedValue;
      this.setState({ selectedTicker: value });
    }
  
    async getTickers() {
      try {
        const response = await fetch('https://api.coinmarketcap.com/v1/ticker/')
        const responseJSON = await response.json();
        this.setState({ tickers: responseJSON });
      } catch (error) {
        console.log("App getTickers() ", error);
      }
    }
  
    async getOverviewData() {
      try {
        const response = await fetch(`https://api.coinmarketcap.com/v1/global/?convert=${this.state.currency}`)
        const responseJSON = await response.json();
        this.setState({ overview: responseJSON });
      } catch (error) {
        console.log("App getOverviewData() ", error);
      }
    }
  
    componentDidMount() {
      this.getTickers();
      this.getOverviewData();
    }
  
    createGraph(ticker = "", currency = "", graphType = "", label = "", filter = "") {
      return (
        &lt;Graph
          filter={filter}
          ticker={ticker}
          currency={currency}
          graphType={graphType}
          label={label}
        /&gt;
      )
    }
  
    render() {
      const { selectedTicker, currency } = this.state;
      const Container = styled.div`
        input:focus,
        select:focus,
        textarea:focus,
      `;
  
      const Title = styled.h1`
        text-align: center;
        color: ${styleConstants.get('Yellow')};
      `;
  
      const LightSpan = styled.span`
        font-weight: 200;
      `;
  
      return (
        &lt;Container&gt;
          &lt;Title&gt;
            Coin:&lt;LightSpan&gt;Dash&lt;/LightSpan&gt;
          &lt;/Title&gt;
          &lt;Overview {...this.state.overview} /&gt;
          &lt;Options
            selectedValue={this.state.selectedTicker}
            values={this.state.tickers.map(data =&gt; {
              return data.symbol;
            })}
            labels={
              this.state.tickers.map(data =&gt; {
                return data.id;
              })
            }
            updateTicker={this.updateTicker} /&gt;
          &lt;Panel label={"Price Action"} content={this.createGraph(selectedTicker, currency, 'line', "Close", "close")} /&gt;
          &lt;Panel label={"Highest Price"} content={this.createGraph(selectedTicker, currency, 'bar', "High", "high")} /&gt;
          &lt;Panel label={"Lowest Price"} content={this.createGraph(selectedTicker, currency, 'bar', "Low", "low")} /&gt;
          &lt;Panel label={"Top Ten List"} content={
            &lt;Table header={["Rank", "Name", "Price", "Change(24 Hour)"]} collection={this.state.tickers} /&gt;
  
          } /&gt;
  
        &lt;/Container&gt;
      );
    }
  }
  </code></pre>