Is it possible to pass context to dumb child component in React?

Question

Note: This isn't related to my problem but I already viewed this link.

Say I have my app component:

import React, { Component, PropTypes } from 'react';

class App extends Component {
    // stuff & code
    <Header />
    // code & stuff
}

App.childContextTypes {
    router: Proptypes.object.isRequired;
}

And then I have a Header component which I defined as a constant:

import React, { PropTypes } from 'react';

getPath() {
    const router = { this.context };
    return router.location.pathname; 
}

const Header = (props) => { 
    // header stuff
    <div>{getPath()}</div>
}

Header.contextTypes {
    router: Proptypes.object.isRequired;
}

all the above is dummy code, but it's what I have in a nutshell. So far when I try to access the router object in the header, the router object is undefined. Is it possible to pass through props in such a way to a component that is a const and not defined explicitly as a React class?

In my react project I am using react-router.

score 0 · Accepted Answer · answered Jun 19 '17 at 17:03

You can have context passed to stateless components. React docs

You will get context in the second argument.

const Header = (props, context) => 
{
      console.log(context);
      return (<div></div>);
} 
Header.contextTypes = { 
    router: Proptypes.object.isRequired; 
}

Is it possible to pass context to dumb child component in React?

1 Answers1