Add key to inspected-element error boundary (#21535)
This way changing the selected element also recreates/resets the boundary automatically.
Brian Vaughn committed
May 19, 2021 at 14:38 UTC
ebcec3cc20417528ffe80f0b11701af42b399939
1 file changed
+8
-1
packages/react-devtools-shared/src/devtools/views/Components/InspectedElementErrorBoundary.js
+8
-1
@@ -8,7 +8,9 @@
8
*/
9
10
import * as React from 'react';
11
+import {useContext} from 'react';
12
import ErrorBoundary from '../ErrorBoundary';
13
+import {TreeStateContext} from './TreeContext';
14
import styles from './InspectedElementErrorBoundary.css';
15
16
type WrapperProps = {|
@@ -18,9 +20,14 @@ type WrapperProps = {|
20
export default function InspectedElementErrorBoundaryWrapper({
21
children,
22
}: WrapperProps) {
23
+ // Key on the selected element ID so that changing the selected element automatically hides the boundary.
24
+ // This seems best since an error inspecting one element isn't likely to be relevant to another element.
25
+ const {selectedElementID} = useContext(TreeStateContext);
26
return (
27
<div className={styles.Wrapper}>
23
- <ErrorBoundary canDismiss={true}>{children}</ErrorBoundary>
28
+ <ErrorBoundary key={selectedElementID} canDismiss={true}>
29
+ {children}
30
+ </ErrorBoundary>
31
</div>
32
);
33
}