How to use another <Consumer> in a <Provider>?

Question

./App.js

import React from "react";
import ReactDOM from "react-dom";
import { Provider } from './context.js';
import { Provider as Provider2 } from './context2.js';
import Child from './Child.js';

import "./styles.css";

class App extends React.Component {
    render () {
        return (
            <Provider number={1}>
                <Provider2 number2={2}>
                    <Child/>
                </Provider2>
            </Provider>
        );
    }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

./Child.js

import React from 'react';
import { Consumer } from './context.js';

class Child extends React.Component {
    render() {
        return (
            <Consumer>
                {(value) => (
                    <div>{value.number}</div>
                )}
            </Consumer>
        );
    }
}

export default Child;

./context.js

import React, { createContext } from 'react';
import { Consumer as Consumer2 } from './context2.js';

const Context = createContext(undefined),
      Consumer = Context.Consumer;

class Provider extends React.Component {
    render () {
        return (
            <Consumer2>
                {(value) => (
                    <Context.Provider value={{ number:(this.props.number + value.number2) }}>
                        {this.props.children}
                    </Context.Provider>
                )}
            </Consumer2>
        );
    }
}

export { Consumer, Provider };

./context2.js

import React, { createContext } from 'react';

const Context = createContext(undefined),
      Consumer = Context.Consumer;

class Provider extends React.Component {
    render () {
        return (
            <Context.Provider value={{ number2:this.props.number2 }}>
                {this.props.children}
            </Context.Provider>
        );
    }
}

export { Consumer, Provider };

Hello, as you see context.js , I use Consumer2 in Provider . But I got error value is undefined .

When I put Provider2 into Provider , it works well.

But I want to set a values from server, so I have to use Provider2 in App.js .

You can test on https://codesandbox.io/s/py5jrj8n07 .

Is there any good idea? Thanks for reading :)

Answer 1

Provider tries to consume a value of Provider2 . In your index.js (App) file, you have to switch the places of the providers to let them be able to consume in the correct order. Provider2 does not consume from Provider , so this should work:

<Provider2 number2={2}>
  <Provider number={1}>
    <Child />
  </Provider>
</Provider2>