CODEWITHSUNDEEP
reactjs
Alberto
Alberto

Reputation: 1408

React two contexts at the same time

Hello I'm messing around with context in React and I'm wondering if there is a way to consume 2 context in the same class with the static way. I know I can do it with 2 consumers and accesing their value returning a function like the doc says, but I want to access both context in the whole class like it is done with static contextType = HomeContext. Is there a way to do something like this?:

FormControl.contextType = {
  HomeContext,
  FormContext
}

Upvotes: 5

Views: 3156

Answers (1)

Shubham Khatri
Shubham Khatri

Reputation: 281686

Multiple context can't be accessed using the contextType Api. Instead you need to make use of Render props pattern

<HomeContext.Consumer>
   {(homeContext) => (
      <FormContext.Consumer>
         {(formContext) => (
             <YourComponent homeContext={homeContext} formContext={formContext} />
         )}
      </FormContext.Consumer>
   )}
</HomeContext.Consumer>

Upvotes: 6

Related Questions