how to propagate context to Router component. Reactjs

Question

I want to make logged user's data global in my reactjs app. My App code:

class App extends Component {
  getChildContext = () => {
    return {
      user: {
       name: 'username',
       email: '[email protected]'
      }
    }
  }

  render() {
    return (
    <Router>
      <div>
        <Route exact path='/game' component={Game} />
        <Route exact path='/singup' component={Singup} />
      </div>
    </Router>
  );
 }

App.childContextTypes = {
 user: PropTypes.object
};

In Game component I try to get use through this.context.user but I get undefined.

Can I propagate context to Router component?

you don't need to propagate context, context is available globally. — Bharat Gupta
– Bharat Gupta, Commented Nov 26, 2017 at 13:00

Nikhil Fadnis · Accepted Answer · 2017-11-26 13:20:01Z

1

By adding childContextTypes and getChildContext to the context provider, React passes the information down automatically and any component in the subtree can access it by defining contextTypes. If contextTypes is not defined, then context will be an empty object.

Make sure you've defined contextTypes on your Game component

Game.contextTypes = {
  user: PropTypes.object
};

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

answered Nov 26, 2017 at 13:20

Nikhil Fadnis

8606 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ivan Hreskiv Over a year ago

Thank you @Nikhil Fadnis. It nice explanation. It fixed the problem.

Collectives™ on Stack Overflow

how to propagate context to Router component. Reactjs

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related