Undefined context in the react tree

Question

I am receiving static context undefined everywhere, what have i missed? Could Router affect it somehow or i simply forgot some little part. The idea is to define users browser and distribute result true/false within all my components. Thank you

    class App extends Component {

    static contextType = GlobalContext;

    isBrowserChrome = () => {
        return window.navigator.userAgent.indexOf('Chrome') !== -1;
    };



    render() {
        return (
            <GlobalProvider isChrome={this.isBrowserChrome()} >
            <AppLayout>
                <PageLayout>
                    <Loading/>
                    <PureModal/>
                    <ContentLayout>
                            <DashboardLayout>
                                {this.props.auth.authenticated && <EpMenu/> }
                                <div style={{marginTop: '20px'}}>
                                    <Switch>
                                        <Route exact path="/login/:token?" component={LoginPage}/>
                                        <PrivateRoute exact path="/welcome" component={Welcome}/>
                                    </Switch>
                                </div>
                            </DashboardLayout>
                    </ContentLayout>
                </PageLayout>
            </AppLayout>
            </GlobalProvider>
        );
    }
}

App.contextType = GlobalContext;

export default App;

export const GlobalContext = React.createContext(false);

export class GlobalProvider extends Component {

    render() {
        return (
            <GlobalContext.Provider value={this.props.isChrome}>
                {this.props.children}
            </GlobalContext.Provider>
        )
    }
}

Answer 1

You have to use contextconsumer to use context value

Please find below link for reference of Context API:

https://reactjs.org/docs/context.html#contextconsumer