diff --git a/packages/react-devtools-shell/src/app/InspectableElements/Contexts.js b/packages/react-devtools-shell/src/app/InspectableElements/Contexts.js
index 030e995e35..8d9af3f22d 100644
--- a/packages/react-devtools-shell/src/app/InspectableElements/Contexts.js
+++ b/packages/react-devtools-shell/src/app/InspectableElements/Contexts.js
@@ -8,11 +8,19 @@
*/
import * as React from 'react';
-import {createContext, Component, Fragment, useContext} from 'react';
+import {createContext, Component, useContext} from 'react';
import PropTypes from 'prop-types';
function someNamedFunction() {}
+function formatContextForDisplay(name, value) {
+ return (
+
+ {name}: {JSON.stringify(value, null, 2)}
+
+ );
+}
+
const contextData = {
array: ['first', 'second', 'third'],
bool: true,
@@ -61,7 +69,7 @@ class LegacyContextConsumer extends Component {
};
render() {
- return null;
+ return formatContextForDisplay('LegacyContextConsumer', this.context);
}
}
@@ -88,34 +96,55 @@ class ModernContextType extends Component {
static contextType = ModernContext;
render() {
- return null;
+ return formatContextForDisplay('ModernContextType', this.context);
}
}
function FunctionalContextConsumer() {
- useContext(StringContext);
- return null;
+ const value = useContext(StringContext);
+ return formatContextForDisplay('FunctionalContextConsumer', value);
}
export default function Contexts() {
return (
-
-
-
-
-
- {value => null}
-
-
-
- {value => null}
- {value => null}
- {value => null}
- {value => null}
- {value => null}
- {value => null}
- {value => null}
- {value => null}
-
+
+
Contexts
+
+
+
+
+
+
+ {value => formatContextForDisplay('ModernContext.Consumer', value)}
+
+
+
+
+
+ {value => formatContextForDisplay('ArrayContext.Consumer', value)}
+
+
+ {value => formatContextForDisplay('BoolContext.Consumer', value)}
+
+
+ {value => formatContextForDisplay('FuncContext.Consumer', value)}
+
+
+ {value => formatContextForDisplay('NumberContext.Consumer', value)}
+
+
+ {value => formatContextForDisplay('StringContext.Consumer', value)}
+
+
+ {value => formatContextForDisplay('SymbolContext.Consumer', value)}
+
+
+ {value => formatContextForDisplay('NullContext.Consumer', value)}
+
+
+ {value => formatContextForDisplay('UndefinedContext.Consumer', value)}
+
+
+
);
}