title: ReactJs app crashes with error "Consider adding error boundaries to your tree"
body: <p>Trying to Build Random quote api app with React. When first time app loads on Button Click it generates the random quote. But on Second Click App Crashes with</p>
  <blockquote>
  <p>Error occured in App Component</p>
  <p>Consider adding an error boundary to your tree to customize error handling behavior.</p>
  </blockquote>
  <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>class App extends React.Component {
    state = {
      quotes: null
    };
    componentDidMount() {
    fetch("https://gist.githubusercontent.com/camperbot/5a022b72e96c4c9585c32bf6a75f62d9/raw/e3c6895ce42069f0ee7e991229064f167fe8ccdc/quotes.json")
        .then(res =&gt; res.json())
        .then(data =&gt; {
          // console.log(data);
          this.setState({
            quotes: data.quotes
          });
        });
      // console.log(this.state.quotes);
    }
    randomQuoteHandler = () =&gt; {
      const randNumb = Math.floor(Math.random() * this.state.quotes.length);
      const randomQuote = this.state.quotes[randNumb];
      this.setState({
        quotes: randomQuote
      });
      console.log(this.state.quotes);
    };
    render() {
      return (
        &lt;div&gt;
          &lt;button onClick={this.randomQuoteHandler}&gt;gen&lt;/button&gt;
          &lt;p&gt;{this.state.quotes !== null &amp;&amp; this.state.quotes.quote}&lt;/p&gt;
          &lt;p&gt; {this.state.quotes !== null &amp;&amp; this.state.quotes.author}&lt;/p&gt;
        &lt;/div&gt;
      );
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>