Skip to content

Commit f402ba6

Browse files
mathiassoeholmpiotrwitek
authored andcommittedApr 28, 2019
Error boundary example fix (#166)
* Updated error boundary example with working code * Updates based on review * Updated example in readme * Some white space change
1 parent 128c540 commit f402ba6

File tree

2 files changed

+48
-12
lines changed

2 files changed

+48
-12
lines changed
 

‎README.md

+24-6
Original file line numberDiff line numberDiff line change
@@ -623,19 +623,37 @@ export const withErrorBoundary = <BaseProps extends InjectedProps>(
623623
<details><summary><i>Click to expand</i></summary><p>
624624
625625
```tsx
626-
import * as React from 'react';
626+
import React, {useState} from 'react';
627627

628628
import { withErrorBoundary } from '../hoc';
629629
import { ErrorMessage } from '../components';
630630

631631
const ErrorMessageWithErrorBoundary =
632632
withErrorBoundary(ErrorMessage);
633633

634-
const BrokenButton = () => (
635-
<button type="button" onClick={() => { throw new Error(`Catch me!`); }}>
636-
{`Throw nasty error`}
637-
</button >
638-
);
634+
const BrokenComponent = () => {
635+
throw new Error('I\'m broken! Don\'t render me.');
636+
};
637+
638+
const BrokenButton = () => {
639+
const [shouldRenderBrokenComponent, setShouldRenderBrokenComponent] =
640+
useState(false);
641+
642+
if (shouldRenderBrokenComponent) {
643+
return <BrokenComponent />;
644+
}
645+
646+
return (
647+
<button
648+
type="button"
649+
onClick={() => {
650+
setShouldRenderBrokenComponent(true);
651+
}}
652+
>
653+
{`Throw nasty error`}
654+
</button>
655+
);
656+
};
639657

640658
export default () => (
641659
<ErrorMessageWithErrorBoundary>

‎playground/src/hoc/with-error-boundary.usage.tsx

+24-6
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,34 @@
1-
import * as React from 'react';
1+
import React, {useState} from 'react';
22

33
import { withErrorBoundary } from '../hoc';
44
import { ErrorMessage } from '../components';
55

66
const ErrorMessageWithErrorBoundary =
77
withErrorBoundary(ErrorMessage);
88

9-
const BrokenButton = () => (
10-
<button type="button" onClick={() => { throw new Error(`Catch me!`); }}>
11-
{`Throw nasty error`}
12-
</button >
13-
);
9+
const BrokenComponent = () => {
10+
throw new Error('I\'m broken! Don\'t render me.');
11+
};
12+
13+
const BrokenButton = () => {
14+
const [shouldRenderBrokenComponent, setShouldRenderBrokenComponent] =
15+
useState(false);
16+
17+
if (shouldRenderBrokenComponent) {
18+
return <BrokenComponent />;
19+
}
20+
21+
return (
22+
<button
23+
type="button"
24+
onClick={() => {
25+
setShouldRenderBrokenComponent(true);
26+
}}
27+
>
28+
{`Throw nasty error`}
29+
</button>
30+
);
31+
};
1432

1533
export default () => (
1634
<ErrorMessageWithErrorBoundary>

0 commit comments

Comments
 (0)
Failed to load comments.