<div id="root">
  <!-- This div's content will be managed by React. -->
</div>

const styles = {
  fontFamily: "sans-serif",
  textAlign: "center"
};

class Buggy extends React.Component {
 
  state = { greeting: "Welcome"};
  componentDidMount() {
    throw new Error("An error has occured in Buggy component!");
  }
  render() {
    return <h2>{this.state.greeting}</h2>;
  }
}

const App = () => (
  <div style={styles}>

    <h2>Error Boundaries Example</h2>
     <Buggy />
  </div>
);

ReactDOM.render(<App />, document.getElementById("root"));
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://unpkg.com/react@16/umd/react.development.js
  2. https://unpkg.com/react-dom@16/umd/react-dom.development.js