1

I'm using React's new context api (v16.x).

I made a simple test application to ensure my understanding of it:

const MyContext = React.createContext();

const Child = () => (
  <MyContext.Consumer>
    {value => value}
  </MyContext.Consumer>
)

const Parent = () => (
  <MyContext.Provider value={"Working"}>
    <Child/>
  </MyContext.Provider>
)

This works fine, even with intermediary components between <Parent> and <Child>.

However, the component below produces the following error: "Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined" (note: I'm using material-ui library)

let NavigationPanel = (props) => (
  <DisabledContext.Provider value={props.disabled}>
    <InstructionsContext.Provider value={props.onOpenInstructions}>
      <Hidden mdUp><DrawerNavigationPanel data={props.data}/></Hidden>
      <Hidden smDown><StaticNavigationPanel data={props.data}/></Hidden>
    </InstructionsContext.Provider>
  </DisabledContext.Provider>
)

Why might this be happening?

sookie
  • 2,437
  • 3
  • 29
  • 48
  • 1
    This is more likely related to your imports. Check out this other answer: https://stackoverflow.com/a/36265067/6899860 – Don Brody Nov 30 '18 at 14:07
  • 1
    Oh wow. That's embarassing. I used a named import for the Hidden component. Thanks – sookie Nov 30 '18 at 14:43

0 Answers0