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>
    );
}

}

Answer 1

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
  }
}

Answer 2

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
  }
}