<main></main>

class Bomb extends React.Component {
  constructor(props) {
    super(props);
    this.state = { boom: false };
    this.boom = this.boom.bind(this);
  }
  
  boom() {
    this.setState({ boom: true });
  }
  
  render() {
    if (this.state.boom) {
      throw 'Boom!';
    }
    
    return (
      <button onClick={this.boom} key={this.state.bombs}>Boom!</button>
    )
  }
}

class Sandbox extends React.Component {
  constructor(props) {
    super(props);
    this.state = { bombs: 0 };
  }
  
  componentDidCatch(error, info) {
    this.setState({
      bombs: this.state.bombs + 1,
    });
  }
  
  render() {
    return (
      <div>
        <p>{this.state.bombs} bombs blew up</p>
        <Bomb />
      </div>
    )
  }
}

ReactDOM.render(<Sandbox />, document.querySelector('main'));
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/react/16.3.1/umd/react.development.js
  2. https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.3.1/umd/react-dom.development.js