How can I get the data of context consumer outside the render function ?

[rajqumar]

//create a react context
const URLContext = React.createContext();
//create a provider for the urlcontext

class URLProvider extends Component {
  state = {
    url: Router.router.route
  }
  render() {
    return (
      <URLContext.Provider value={this.state} >
        {this.props.children}
      </URLContext.Provider>
    );
  }
}

I created a HOC component

import Menu from './Menu';

const WithContext = (Menu) => {
  return (props) => (
      <URLProvider.Consumer>
           {context =>  <Menu {...props} context={value} />}
      </URLProvider.Consumer>
  }
}

[wesbos]

thats exactly how you do it - create a HOC :)

[pupretiDev]

I think there are two issues with the above code:

1. Instead of <URLProvider.Consumer> we should use <URLContext.Consumer>
2. And also while wrapping inside consumer, context as property being passed to Menu component should be equal to 'context' which is the param of render Prop.

Combining both:

import Menu from './Menu';

const WithContext = (Menu) => {
return (props) => (
<URLContext.Consumer>
{context => <Menu {...props} context={context} />}
</URLContext.Consumer>
}
}