I'm trying to learn the Context API, and what I want to achieve, is showing the Logged In user in my header, as well as manipulate my menu options based on the logged in state (Is it safe to store 'isAuthenticated' in state?)

My context class:

import React from 'react';



const Context = React.createContext();



export class Provider extends React.Component {



    state = {

        isAuthenticated: true,

        user: {

            name: Joe Smith,

            email: [email protected]

        }

    }



    render() {

        return (

            <Context.Provider value={this.state}>

                {this.props.children}

            </Context.Provider>

        )

    }

}



export const Consumer = Context.Consumer;

So, extremely basic. Sets up a state, and in some child components later, I want to display the chaps name.

My App.js is the using 'Provider', so that all my components have access to this data:

import React from 'react';

import { HashRouter , Route, Switch } from 'react-router-dom';

import Home from './components/home';

import Header from './components/header';

import Accounts from './components/accounts';

import Reports from './components/reports';

import Login from './components/login';

import {Container} from 'reactstrap';



import { Provider } from './context';



function App() {

  return (

    <div className=App>

      <Provider>

        <HashRouter>

          <Header />

          <Container>

            <Switch>

              <Route exact path=/ component={Home} />

              <Route exact path=/accounts component={Accounts} />

              <Route exact path=/reports component={Reports} />

              <Route exact path=/login component={Login} />

            </Switch>

          </Container>

        </HashRouter>

      </Provider>

    </div>

  );

}



export default App;

So in this case, 'Header' needs access to my context.
My Header will show a menu (which, based on some info I'll add to the context, will show or hide options, login buttons etc).

Under the menu, I want to show a small info bar. Logged in user name, for example. So, my header class looks like this:

import React from 'react';

import Menu from './menu';

import InfoBar from './infobar';

import { Consumer } from '../context';



class Header extends React.Component {



    render() {

        const menuStyle = {

            paddingBottom: 5px

        }



        return(

            <Consumer>

                <div style={menuStyle}>

                    {value => {

                        console.log(value);

                        return (

                            <h1>Test</h1>

                        )

                    }}

                    <Menu  />

                    <InfoBar />

                </div>

            </Consumer>

        )

    }

}



export default Header;

But the problem now happens. When I run my code, it compiles and runs, but right away, I get a runtime error:

TypeError: render is not a function updateContextConsumer
C:/Storage/Scratch/ReactApp/accufinance/node_modules/react-dom/cjs/react-dom.development.js:16082

I read something about returns and multiple children, but my code seems to not have that issue. Any assistance with understanding the issue and where the problem is happening would be great. If I comment out the code in 'header', no error... but... no screen either. It seems to be occuring in the area.