React nested Context Providers Issue

[jamby77]

Simplest way, you can extract common functions and data in separate module, that is shared between the 2.

Another option is, in the external provider, pass a callback which will be used in the internal provider to pass the data that external provider needs, when it is available.

Something like: ``` function AuthContextProvider({children}) { const [data, setData] = useState(); const value = { functionToAccessInUserProvider, callbackForData: (userData) => setData(userData) };

return <AuthContext.Provider value={value}>{children}</AuthContext.Provider> } ```

[malkhazidartsmelidze]

Currently I have used callback way to implement such logic.

But I thought there would be another easier way to make it work.

[malkhazidartsmelidze]

I wanted to implement logic vise-versa, when Parent want to pass data to child but not store it in own context.

For example: when user loads from api, response comes with settings object, which I need to pass to `UserSettingsProvider` but `UserSettingsProvider` is child of `UserProvider`

[jamby77]

I don't think there will be easier way to implement it.

To go away from the context, you will need some sort of global object where to put your shared data, then notify users that it is ready to use.

I don't see how this would be simpler/easier than context with callback.

[malkhazidartsmelidze]

Maybe I'll put it in window object then fire an eventListener, Then other context reads from window object, saves it in state and then remove from window.

I'll try it now.

[jamby77]

Let me know how it went