Fix and improve example : with-componentdidcatch (#4400)

* Fix example with-componentdidcatch

* Improve demo in example
: with-componentdidcatch

* Change next dependency to latest

* Revert _app.js

examples/with-componentdidcatch/package.json

@@ -7,7 +7,7 @@
     "start": "next start"
   },
   "dependencies": {
-    "next": "6.0.0-canary.6",
+    "next": "latest",
     "react": "^16.0.0",
     "react-dom": "^16.0.0"
   },

examples/with-componentdidcatch/pages/index.js

@@ -1,4 +1,30 @@
-export default () => {
-  // Render time error
-  throw new Error('Test')
+import React, { Component } from 'react'
+
+class BuggyCounter extends Component {
+  state = {
+    counter: 0
+  }
+
+  handleClick = () => {
+    this.setState(({ counter }) => ({
+      counter: counter + 1
+    }))
+  }
+
+  render () {
+    if (this.state.counter === 5) {
+      // Simulate a JS error
+      throw new Error('I crashed!')
+    }
+
+    return <h1 onClick={this.handleClick}>{this.state.counter}</h1>
+  }
 }
+
+export default () => (
+  <div>
+    <p>Click on the number to increase the counter.</p>
+    <p>The counter is programmed to throw an error when it reaches 5.</p>
+    <BuggyCounter />
+  </div>
+)

examples/with-componentdidcatch/readme.md

@@ -41,4 +41,4 @@ now
 
 ## The idea behind the example
 
-This example shows how to catch errors caught by `componentDidCatch` in React's client side.
+This example shows how to catch errors caught by `componentDidCatch` in React's **client** side.