Pass value from child React context to parent React context - reactjs

Question

I have 2 React context providers, both of which contain actions functions that update their state. I need to call one of these action function from the parent react context, but the context is undefined because it's not wrapped by the provider.
I cannot change the order of the wrapped providers. I also cannot put all the code inside the same provider (the code would be too large and not separated by concern).
import React, {useContext, createContext} from 'react'
const AAAAContext = createContext()
const BBBBContext = createContext()
function AAAAProvider(props) {
const bbbbContext = useContext(BBBBContext) // this is always undefined because not wrapped in BBBBProvider
const aaaaActions = {
doSomething: () => {
bbbbContext.bbbbActions.doSomething()
}
}
const aaaaContext = {aaaaActions}
return <AAAAContext.Provider value={aaaaContext}>{props.children}</AAAAContext.Provider>
}
function BBBBProvider(props) {
const aaaaContext = useContext(AAAAContext)
const bbbbActions = {
doSomething: () => {
aaaaContext.aaaaActions.doSomething()
}
}
const bbbbContext = {bbbbActions}
return <BBBBContext.Provider value={bbbbContext}>{props.children}</BBBBContext.Provider>
}
function App() {
return (
<AAAAProvider>
<BBBBProvider>
Hello
</BBBBProvider>
</AAAAProvider>
)
}

Answer 1

One possible way is to store child context in the parent context, and every time the child context changes in useEffect, call a function in the parent to update the child context in the parent context.
import React, {useContext, createContext, useState, useEffect} from 'react'
const AAAAContext = createContext()
const BBBBContext = createContext()
function AAAAProvider(props) {
const [bbbbActions, setBBBBActions] = useState()
const aaaaActions = {
doSomething: () => {
bbbbActions.doSomething()
},
setBBBBActions
}
const aaaaContext = {aaaaActions}
return <AAAAContext.Provider value={aaaaContext}>{props.children}</AAAAContext.Provider>
}
function BBBBProvider(props) {
const aaaaContext = useContext(AAAAContext)
const bbbbActions = {
doSomething: () => {
console.log('bbbbActions.doSomething')
}
}
const bbbbContext = {bbbbActions}
useEffect(() => {
aaaaContext.aaaaActions.setBBBBActions(bbbbActions)
}, [])
return <BBBBContext.Provider value={bbbbContext}>{props.children}</BBBBContext.Provider>
}
function Component() {
const aaaaContext = useContext(AAAAContext)
window.aaaaContext = aaaaContext
return 'Hello'
}
function App() {
const aaaaContext = useContext(AAAAContext)
window.aaaaContext = aaaaContext
return (
<AAAAProvider>
<BBBBProvider>
<Component/>
</BBBBProvider>
</AAAAProvider>
)
}
export default App