From 928be8e980ac4e396e84b4c587e978ef651bfef4 Mon Sep 17 00:00:00 2001
From: mathiassoeholm <mathiassoeholm@gmail.com>
Date: Wed, 24 Apr 2019 10:13:38 +0200
Subject: [PATCH 1/4] Updated error boundary example with working code

---
 README.md                                     | 27 +++++++++++++++----
 .../src/hoc/with-error-boundary.usage.tsx     | 27 +++++++++++++++----
 2 files changed, 44 insertions(+), 10 deletions(-)

diff --git a/README.md b/README.md
index 22aa056..29ca890 100644
--- a/README.md
+++ b/README.md
@@ -624,6 +624,7 @@ export const withErrorBoundary = <BaseProps extends InjectedProps>(
 
 ```tsx
 import * as React from 'react';
+import {useState} from 'react';
 
 import { withErrorBoundary } from '../hoc';
 import { ErrorMessage } from '../components';
@@ -631,11 +632,27 @@ import { ErrorMessage } from '../components';
 const ErrorMessageWithErrorBoundary =
   withErrorBoundary(ErrorMessage);
 
-const BrokenButton = () => (
-  <button type="button" onClick={() => { throw new Error(`Catch me!`); }}>
-    {`Throw nasty error`}
-  </button >
-);
+const BrokenButton = () => {
+  const [throwError, setThrowError] = useState(false);
+
+  if (throwError) {
+    throw new Error('Catch me!');
+  }
+
+  return (
+    <button
+      type="button"
+      onClick={() => {
+        // We don't just throw the error here, because error boundaries
+        // only catch errors thrown by render and lifecycle methods. Read more:
+        // https://reactjs.org/docs/error-boundaries.html#how-about-event-handlers
+        setThrowError(true);
+      }}
+    >
+      {`Throw nasty error`}
+    </button>
+  );
+};
 
 export default () => (
   <ErrorMessageWithErrorBoundary>
diff --git a/playground/src/hoc/with-error-boundary.usage.tsx b/playground/src/hoc/with-error-boundary.usage.tsx
index 3045b75..06dd4c7 100644
--- a/playground/src/hoc/with-error-boundary.usage.tsx
+++ b/playground/src/hoc/with-error-boundary.usage.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import {useState} from 'react';
 
 import { withErrorBoundary } from '../hoc';
 import { ErrorMessage } from '../components';
@@ -6,11 +7,27 @@ import { ErrorMessage } from '../components';
 const ErrorMessageWithErrorBoundary =
   withErrorBoundary(ErrorMessage);
 
-const BrokenButton = () => (
-  <button type="button" onClick={() => { throw new Error(`Catch me!`); }}>
-    {`Throw nasty error`}
-  </button >
-);
+const BrokenButton = () => {
+  const [throwError, setThrowError] = useState(false);
+
+  if (throwError) {
+    throw new Error('Catch me!');
+  }
+
+  return (
+    <button
+      type="button"
+      onClick={() => {
+        // We don't just throw the error here, because error boundaries
+        // only catch errors thrown by render and lifecycle methods. Read more:
+        // https://reactjs.org/docs/error-boundaries.html#how-about-event-handlers
+        setThrowError(true);
+      }}
+    >
+      {`Throw nasty error`}
+    </button>
+  );
+};
 
 export default () => (
   <ErrorMessageWithErrorBoundary>

From 81840f7296ffacb634ff173ce36a602b4778e903 Mon Sep 17 00:00:00 2001
From: Mathias Soeholm <mathiassoeholm@gmail.com>
Date: Sun, 28 Apr 2019 22:03:45 +0200
Subject: [PATCH 2/4] Updates based on review

---
 .../src/hoc/with-error-boundary.usage.tsx     | 19 ++++++++++---------
 1 file changed, 10 insertions(+), 9 deletions(-)

diff --git a/playground/src/hoc/with-error-boundary.usage.tsx b/playground/src/hoc/with-error-boundary.usage.tsx
index 06dd4c7..772fa50 100644
--- a/playground/src/hoc/with-error-boundary.usage.tsx
+++ b/playground/src/hoc/with-error-boundary.usage.tsx
@@ -1,5 +1,4 @@
-import * as React from 'react';
-import {useState} from 'react';
+import React, {useState} from 'react';
 
 import { withErrorBoundary } from '../hoc';
 import { ErrorMessage } from '../components';
@@ -7,21 +6,23 @@ import { ErrorMessage } from '../components';
 const ErrorMessageWithErrorBoundary =
   withErrorBoundary(ErrorMessage);
 
+const BrokenComponent = () => {
+  throw new Error('I\'m broken! Don\'t render me.');
+};
+
 const BrokenButton = () => {
-  const [throwError, setThrowError] = useState(false);
+  const [shouldRenderBrokenComponent, setShouldRenderBrokenComponent] =
+    useState(false);
 
-  if (throwError) {
-    throw new Error('Catch me!');
+  if (shouldRenderBrokenComponent) {
+    return <BrokenComponent />;
   }
 
   return (
     <button
       type="button"
       onClick={() => {
-        // We don't just throw the error here, because error boundaries
-        // only catch errors thrown by render and lifecycle methods. Read more:
-        // https://reactjs.org/docs/error-boundaries.html#how-about-event-handlers
-        setThrowError(true);
+        setShouldRenderBrokenComponent(true);
       }}
     >
       {`Throw nasty error`}

From 34db7ac78b9384e514beaa9bde6704b05d81a9b7 Mon Sep 17 00:00:00 2001
From: Mathias Soeholm <mathiassoeholm@gmail.com>
Date: Sun, 28 Apr 2019 22:05:05 +0200
Subject: [PATCH 3/4] Updated example in readme

---
 README.md | 21 +++++++++++----------
 1 file changed, 11 insertions(+), 10 deletions(-)

diff --git a/README.md b/README.md
index cc3b5e5..f66aca1 100644
--- a/README.md
+++ b/README.md
@@ -623,8 +623,7 @@ export const withErrorBoundary = <BaseProps extends InjectedProps>(
 <details><summary><i>Click to expand</i></summary><p>
 
 ```tsx
-import * as React from 'react';
-import {useState} from 'react';
+import React, {useState} from 'react';
 
 import { withErrorBoundary } from '../hoc';
 import { ErrorMessage } from '../components';
@@ -632,21 +631,23 @@ import { ErrorMessage } from '../components';
 const ErrorMessageWithErrorBoundary =
   withErrorBoundary(ErrorMessage);
 
+const BrokenComponent = () => {
+  throw new Error('I\'m broken! Don\'t render me.');
+};
+
 const BrokenButton = () => {
-  const [throwError, setThrowError] = useState(false);
+  const [shouldRenderBrokenComponent, setShouldRenderBrokenComponent] =
+    useState(false);
 
-  if (throwError) {
-    throw new Error('Catch me!');
+  if (shouldRenderBrokenComponent) {
+    return <BrokenComponent />;
   }
 
   return (
     <button
       type="button"
       onClick={() => {
-        // We don't just throw the error here, because error boundaries
-        // only catch errors thrown by render and lifecycle methods. Read more:
-        // https://reactjs.org/docs/error-boundaries.html#how-about-event-handlers
-        setThrowError(true);
+        setShouldRenderBrokenComponent(true);
       }}
     >
       {`Throw nasty error`}
@@ -1638,7 +1639,7 @@ We have our own recommended `tsconfig.json` that you can easily add to your proj
   ],
   "extends": "./node_modules/react-redux-typescript-scripts/tsconfig.json",
   "compilerOptions": {}
-}
+}
 
 ```
 </p></details>

From 6da1bbba16483ba5ed0addc5c0a592d80aee7622 Mon Sep 17 00:00:00 2001
From: Mathias Soeholm <mathiassoeholm@gmail.com>
Date: Sun, 28 Apr 2019 22:07:00 +0200
Subject: [PATCH 4/4] Some white space change

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index f66aca1..0d9e914 100644
--- a/README.md
+++ b/README.md
@@ -1639,7 +1639,7 @@ We have our own recommended `tsconfig.json` that you can easily add to your proj
   ],
   "extends": "./node_modules/react-redux-typescript-scripts/tsconfig.json",
   "compilerOptions": {}
-}
+}
 
 ```
 </p></details>