Using multiple context in a class component

Question

How can I use multiple Contexes in a React Class Component? Like how you can use multiple contexes in functional components like calling useContext twice or more on the contexes that you want to use?

export default class Component extends React.Component{

static contextType = LocalizationContext;

constructor(props){
    super(props);

    this.imageModule = new ImageModule();
    this.state = {

    }
}

componentDidMount = () => console.log(this.context);

render(){
    return(
        <React.Fragment>
            {}
        </React.Fragment>
    );
}

}

Yes, you can but not in this way. Take a look at the second snippet in the React doc: it.reactjs.org/docs/context.html — Danielo
– Danielo, Commented Aug 16, 2020 at 0:38

Nicholas Tower · Accepted Answer · 2023-03-23 00:30:30Z

The static contextType property won't work if you need more than one, so instead you need to use a context consumer. This is easiest when you only need the value in the render function:

export class Example extends React.Component {
  render() {
    <LocalizationContext.Consumer>
      {(translate) => (
        <SomeOtherContext.Consumer>
          {(value) => (
            <div>{translate(value)}</div>
          )}
        </SomeOtherContext.Consumer>
      )}
    </LocalizationContext.Consumer>
  }
}

If you need the value in other lifecycle hooks, such as componentDidMount, then your best option is to wrap this component in one that can read the values from context and then pass them in as props:

export const Example = (props) => (
  <LocalizationContext.Consumer>
    {(translate) => (
      <SomeOtherContext.Consumer>
        {(value) => (
          <InnerComponent translate={translate} value={value} {...props} />
        )}
      </SomeOtherContext.Consumer>
    )}
  </LocalizationContext.Consumer>
)

class InnerComponent extends React.Component {
  componentDidMount() {
    // something with props.translate or props.value
  }
}

Francisco Garcia's solution is also a good one.

Francisco Garcia · Accepted Answer · 2022-06-26 16:08:47Z

12

A modern take on Nicholas Tower's solution above. Thanks Nicholas!

Before hooks, this problem was addressed using the render props pattern. This is made much easier now using the useContext hook:

const Example = (props) => {
  const translate = useContext(LocalizationContext);
  const value = useContext(SomeOtherContext);

  return <InnerComponent translate={translate} value={value} />
} 

class InnerComponent extends React.Component {
  componentDidMount() {
    // something with props.translate or  props.value
  }
}

edited Jun 26, 2022 at 16:08

answered May 6, 2022 at 23:39

Francisco Garcia

3864 silver badges11 bronze badges

2 Comments

linuxdan Over a year ago

HaHa, I love it. How to use multiple contexts in a class component, use a function component instead. This is a nice way to retrofit existing class components without a major refactor, thanks for your answer.

1mike12 Over a year ago

except this literally does not answer the question. The question is specifically about classes. There are times when function components aren't an option

Collectives™ on Stack Overflow

Using multiple context in a class component

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related