Value of context is undefiend-CodePudding

I'm a newbie in react, and I'm struggling with something that should be easy. When a user logs in, I want to save their context and display/hide things on the nav bar. However, the value of the context is undefined when I pass it to children.

A guide to Context can be found here

Here is my code src/App.js:

export default class App extends Component {
    static displayName = App.name;
    render() {
        return (
            <Layout>
                <Route exact path='/' component={Login} />
                <Route path='/fetch-data' component={FetchData} />
            </Layout>
        );
    }
}

src/userContext:

import React from 'react';
const userContext = React.createContext({ user: {} });
export { userContext };

src/components/Layout.js:

import { userContext } from '../userContext';
export class Layout extends Component {
    static displayName = Layout.name;

    constructor(props) {
        super(props);
        this.state = {
            user: { 'test123': 'test456' }
        };
        this.logout = this.logout.bind(this);
    }
    componentDidMount() {
        // get and set currently logged in user to state
    }
    logout() {
        this.setState({ user: {} });
    }
    render() {
        const value = {
            user: this.state.user,
            logoutUser: this.logout
        }
        return (
            <div>
                <userContext.Provider value={value}>
                    <NavMenu />
                    <Container>
                        {this.props.children}
                    </Container>
                </userContext.Provider>
            </div>
        );
    }
}

src/components/NavMenu.js:

import { userContext } from '../userContext';
export class NavMenu extends Component {
    
  static displayName = NavMenu.name;
    componentDidMount() {
        let value = this.context;   
        /* perform a side-effect at mount using the value of MyContext */
    }
  constructor (props) {
    super(props);

    this.toggleNavbar = this.toggleNavbar.bind(this);
    this.state = {
        collapsed: true
    };
  }

  toggleNavbar () {
    this.setState({
      collapsed: !this.state.collapsed
    });
  }

    render() {
       
        if (true) {
            return (
                
                 
                <header>
                    <userContext.Consumer>

                        {({ value }) => {
                            console.log('test')
                            console.log(value);//------------>undefiened
                            console.log(this.context)
                        }}
                    </userContext.Consumer>
...

Is there something I'm missing here

CodePudding user response：

Seems like it can work.

I think the problem is your destructuring value from render props : )

Try:

<userContext.Consumer>
  {(value) => {
    console.log("test")
    console.log(value)
    console.log(this.context)
    return <b>HELLO</b>
  }}
</userContext.Consumer>

Reference for Render props: https://reactjs.org/docs/render-props.html