2 files changed +48
-12
lines changed Original file line number Diff line number Diff line change @@ -623,19 +623,37 @@ export const withErrorBoundary = <BaseProps extends InjectedProps>(
623
623
<details><summary><i>Click to expand</i></summary><p>
624
624
625
625
` ` ` tsx
626
- import * as React from ' react' ;
626
+ import React , { useState } from ' react' ;
627
627
628
628
import { withErrorBoundary } from ' ../hoc' ;
629
629
import { ErrorMessage } from ' ../components' ;
630
630
631
631
const ErrorMessageWithErrorBoundary =
632
632
withErrorBoundary(ErrorMessage);
633
633
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
+ };
639
657
640
658
export default () => (
641
659
<ErrorMessageWithErrorBoundary >
Original file line number Diff line number Diff line change 1
- import * as React from 'react' ;
1
+ import React , { useState } from 'react' ;
2
2
3
3
import { withErrorBoundary } from '../hoc' ;
4
4
import { ErrorMessage } from '../components' ;
5
5
6
6
const ErrorMessageWithErrorBoundary =
7
7
withErrorBoundary ( ErrorMessage ) ;
8
8
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
+ } ;
14
32
15
33
export default ( ) => (
16
34
< ErrorMessageWithErrorBoundary >
0 commit comments