context provider not working

[khanbaba]

Bug report

Here is my code of ContextProvider:

import React, { Component } from 'react'

const DataContext = React.createContext()

class DataProvider extends Component {
  constructor(props) {
    super(props)
    const { menu } = this.props
    this.state = {
      menu: menu
    }
  }

  render() {
    const { children } = this.props
    return (
      <DataContext.Provider value={this.state}>{children}</DataContext.Provider>
    )
  }
}

const DataConsumer = DataContext.Consumer

export default DataProvider
export { DataConsumer }

this is my _app.js

class MyApp extends App {
  static async getInitialProps(appContext) {
    const appProps = await App.getInitialProps(appContext)
    const status = appContext.ctx.req.status
    return { ...appProps, statusMenu: status }
  }
  render() {
    const { Component, pageProps, statusMenu } = this.props
    const { loading, showInstallDialog, deferredPrompt } = this.state
    const { err } = this.props
    const modifiedPageProps = { ...pageProps, err, menu: statusMenu }
    return (
      <AliveScope>
        <div id="comp-wrapp">
          <DataProvider menu={statusMenu}>
            <Component {...modifiedPageProps} />
          </DataProvider>
        </div>
      </AliveScope>
    )
  }
}

the below line print the context in a component:

<DataConsumer>{context => console.log(context)}</DataConsumer>

but this below code not works:

<DataConsumer>{context => <div>{context.menu.reached}</div>}</DataConsumer>

error:

TypeError: Cannot read property 'menu' of undefined

environment:

nextjs: 9.4.4
react: 16.4.0
browser: chromium Version 83.0.4103.61

[jamesmosier]

What logs out when you include <DataConsumer>{context => console.log(context)}</DataConsumer>?

Also what logs out if you log appContext.ctx.req.status in getInitialProps?

[khanbaba]

both of them print the correct object that passed as status to req.

[jamesmosier]

Could you make an example repository with this issue?

I was not able to reproduce in this codesandbox example

[khanbaba]

thanks @jamesmosier
Yes that's working. I don't know what is the problem of my project.

[khanbaba]

any idea to further checks ?

[jamesmosier]

Could you provide a more complete reproduction of your issue? Maybe a repository with the code?

[IRediTOTO]

I am lazy to read code, but context api is working well for me. Let's check your logic code

[zeekrey]

Since there is no code example just a random thought: As it says your context is undefinied I would check the following:

• Init you context with a value, not undefined. I mean this line: const DataContext = React.createContext('🥳')
• If your component is able to consume '🥳' but not the actual value, the component is not a child of the context provider. Only childrens of a Context.Provider are able to consume the context.
• If you still can't consume anything, then there is a general issue with your context definition.