error-handling.js

import React, { Component } from 'react';
import { render } from "react-dom";

class App extends Component {
  constructor(props) {
    super(props);
    this.state = { error: null };
  }

  componentDidCatch(error, errorInfo) {
    this.setState({error: error})
  }

  render() {
    if (this.state.error) {
      return "Malesef 5'e kadar sayabiliyorum.";
    } else {
      return <BuggyCounter />;
    }
  }
}

class BuggyCounter extends Component {
  constructor(props) {
    super(props);
    this.state = { counter: 0 };
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState(({counter}) => ({
      counter: counter + 1
    }));
  }

  render() {
    if (this.state.counter === 5) {
      throw new Error('Sinsi bir hata!');
    }
    return [
      <h1>{this.state.counter}</h1>,
      <button onClick={this.handleClick}>Arttır!</button>
    ];
  }
}


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