Styjun

My application is using React Router(Router.js), I'm trying to implement CentralStore using Context API to pass state to Event.js component rendered by Router.

How to pass context consumer to Component (Event.js) rendered by React Router only? Right now AppContext is undefined in Event.js.

Live code: https://codesandbox.io/s/0x83zz0jmw

const AppContext = React.createContext();

class CentralStore extends React.Component 
 state=
 events: false,
 

 componentDidMount() 
 firebase
 .collection("events")
 .get() 
 .then( querySnapshot => 
 const events = [];
 querySnapshot.docs.forEach(doc => 
 events.push(doc.data());
 );
 this.setState(
 events: events
 );
 );
 

 render()
 return(
 <AppContext.Provider value=
 state: this.state
 >
 this.props.children
 </AppContext.Provider>
 )
 



import React from 'react';
import BrowserRouter, Route, Switch from 'react-router-dom';
import App from '../App';
import EventCreator from './EventCreator';
import NotFound from './NotFound';
import Event from './Event';
import Events from './Events';
import CentralStore from '../CentralStore';

const Router = () => (
 <CentralStore>
 <BrowserRouter>
 <Switch>
 <Route exact path="/" component=App/>
 <Route path="/create-event" component=EventCreator />
 <Route path="/events/:eventId" component=Event />
 <Route path="/events" component=Events />
 <Route component=NotFound/>
 </Switch>
 </BrowserRouter>
 </CentralStore> 
);

export default Router;

//

const Event = (props) => 
 console.log(props);
 return (
 <div className="event">
 <AppContext.Consumer>
 (context) => (
 console.log(context)
 )
 </AppContext.Consumer> */
 </div>
 );
}

export default Event;

Problem was solved by exporting AppContext from CentralStore component

// The missing export

export const AppContext = React.createContext();

class CentralStore extends React.Component 
 state=
 events: false,
 

 componentDidMount() 
 firebase
 .collection("events")
 .get() 
 .then( querySnapshot => 
 const events = [];
 querySnapshot.docs.forEach(doc => 
 events.push(doc.data());
 );
 this.setState(
 events: events
 );
 );
 

 render()
 return(
 <AppContext.Provider value=
 state: this.state
 >
 this.props.children
 </AppContext.Provider>
 )