title: How to work with Error boundaries in react?
body: <p>I'm trying to add error boundaries for a simple application.When I click a button &quot;Something went wrong&quot; should be displayed in the screen.But in my case it is not displaying like that.As I understand <code>ErrorBoundary.js</code> is not working since I tried console log it.When I run this application in the screen it shows <strong>Error: Not a correct click</strong></p>
  <p><strong>App.js</strong></p>
  <pre><code>
  import './App.css';
  import Button from './Components/Button';
  import ErrorBoundary from './Components/ErrorBoundary';
  
  function App() {
    return (
      &lt;div className=&quot;App&quot;&gt;
        
          &lt;ErrorBoundary&gt;
          &lt;Button /&gt;
          &lt;/ErrorBoundary&gt;
      &lt;/div&gt;
    );
  }
  
  export default App;
  </code></pre>
  <p><strong>Button.js</strong></p>
  <pre><code>import React, { Component } from 'react';
  
  class Button extends Component {
  
      constructor(props) {
          super(props);
          this.state = { error: null };
          this.handleClick = this.handleClick.bind(this);
      }
  
      handleClick() {
          console.log(&quot;Test Button&quot;)
          this.state = { error: true};
          throw new Error('Not a correct click');
      }
  
  
      render() {
          if (this.state.error) {
              return &lt;h1&gt;Caught an error!&lt;/h1&gt;
          }
          return &lt;button onClick={this.handleClick} style={{ color: 'white', background: 'blue', width: 200, height: 50 }}&gt;Throw Error&lt;/button&gt;
      }
  }
  
  export default Button;
  </code></pre>
  <p><strong>ErrorBoundary.js</strong></p>
  <pre><code>import React, { Component } from 'react'
  
  class ErrorBoundary extends Component {
  
      constructor (props){
          super(props);
  
          this.state = {
              hasError: false,
              error: null,
              info: null
          }
      }
  
      static getDerivedStateFromError(error){
          this.state.hasError = true
      }
  
      componentDidCatch (error,info){
          console.log(error);
          console.log(info)
      }
  
      render() {
          if(this.state.hasError){
              return &lt;h2&gt;Something went wrong&lt;/h2&gt;
          }
          return this.props.children;
      }
  }
  
  export default ErrorBoundary;
  
  </code></pre>