title: componentDidUpdate(prevProps, prevState, snapshot): prevProps is undefined
body: <p>I am pretty new to React and I am trying to build this simple web app that takes a stock tag as an input and updates the graph based on the performance of the given stock. However, I can't get my graph to update. I tried using componentDidUpdate(prevProps, prevState, snapshot), but for some reason prevProps is undefined and I don't know/understand why. I tried searching online and reading the doc file, but I still can't figure it out. Any help would be appreciated.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import Search from './Search.js'
  import Graph from './Graph.js'
  import Sidebar from './Sidebar.js'
  import './App.css'
  import React, { Component } from 'react';
  
  class App extends Component {
  
      constructor(props) {
          super(props);
         
          this.state = {
              data: [{
                  x: [],
                  close: [],
                  decreasing: { line: { color: '#FF0000' } },
                  high: [],
                  increasing: { line: { color: '#7CFC00' } },
                  line: { color: 'rgba(31,119,180,1)' },
                  low: [],
                  open: [],
                  type: 'candlestick',
                  xaxis: 'x',
                  yaxis: 'y'
              }]
              ,
              layout: {
                  width: 1500,
                  height: 700,
                  font: { color: '#fff' },
                  title: { text: 'Stock', xanchor: "left", x: 0 }, paper_bgcolor: '#243b55', plot_bgcolor: '#243b55', yaxis: { showgrid: true, color: '#fff' },
                  xaxis: {
                      zeroline: true, color: '#fff', showgrid: true, rangeslider: {
                          visible: false
                      }
                  }
              },
              searchfield: '',
              stocktag: ' '
          };
          this.onSearchChange = this.onSearchChange.bind(this);
          this.onSubmitSearch = this.onSubmitSearch.bind(this);
  
      }
  
      componentDidMount() {
          document.body.style.backgroundColor = '#243b55';
          this.loadGraphInfo();
      }
  
      componentDidUpdate(prevProps, prevState, snapshot){
          console.log(prevProps.stocktag);
          console.log(prevState.stocktag);
  
          if (prevProps.stocktag !== prevState.stocktag) {
             //this.fetchData('SPY');
         }
     }
  
      onSearchChange = (event) =&gt; {
          var search = event.target.value;
          this.setState({ stocktag: search });
      }
  
      onSubmitSearch = (e) =&gt; {
          var search = this.state.searchfield;
          this.setState({ stocktag: search });
      }
  
      fetchData(stock) {
          //GET DATA
          //UPDATE STATE
      }
  
      loadGraphInfo() {     
  
          if (this.state.stocktag == ' ') {
              this.fetchData('SPY');
          } else {
              this.fetchData(this.state.stocktag);
          }
  
         
      }
  
      render() {
          return (
              &lt;div className="App" &gt;
                  &lt;Sidebar /&gt;
                  &lt;Search searchChange={this.onSearchChange} submitChange={this.onSubmitSearch} /&gt;
                 &lt;Graph data={this.state.data} layout={this.state.layout} /&gt;
              &lt;/div&gt;
             
          );
      }
  }
  
  export default App;</code></pre>
  </div>
  </div>
  </p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React, { Component } from 'react';
  import './Search.css'
  
  const Search = ({ searchChange, submitChange }) =&gt; {
      return (
          &lt;div&gt;
              &lt;div class="SearchCompInput"&gt;
                  &lt;input class="SearchBar" type="text" onChange={searchChange}/&gt;
              &lt;/div&gt;
              &lt;div class="SearchCompButton"&gt;
                  &lt;button class="SearchButton" onClick={submitChange}&gt;Search&lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      );
  }
  
  export default Search;</code></pre>
  </div>
  </div>
  </p>