<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}>Boom!</button>
)
}
}
class Sandbox extends React.Component {
constructor(props) {
super(props);
this.state = { msg: '' };
}
componentDidCatch(error, info) {
this.setState({
msg: `Error: ${error}; Info: ${JSON.stringify(info)}`
});
}
render() {
return (
<div>
<p>{this.state.msg}</p>
<Bomb />
</div>
)
}
}
ReactDOM.render(<Sandbox />, document.querySelector('main'));
View Compiled
This Pen doesn't use any external CSS resources.