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)} + +
    +
    ); }