I am trying to make a Component where it's children are sent to the bottom of the code, so it can appear on the top of every other element, look an example:
<OverlayWrapper>
<ConfirmationModal/>
</OverlayWrapper>
In this example, everything inside the ConfirmationModal is show in top of every other element
My problem is: if I do this, (I'll show the OverlayWrapper's code later), states that I pass to ConfirmationModal won't update. States inside of it, are updated normally.
const [ showModal, setShowModal ] = useState<boolean>(false)
return<>
<OverlayWrapper>
<ConfirmationModal
show={showModal}
setShow={showModal}
/>
</OverlayWrapper>
<Button
title="Show Modal"
onPress={()=>setShow(!show)}
/>
</>
Just to clarify, without the OverlayWrapper, it does work But with the OverlayWrapper, when I click the button, the Modal doesn't appear
This is the code for the OverlayWrapper and a OverlayContext
interface OverlayProps {
setChildrens: Dispatch<SetStateAction<ReactNode>>
}
const OverlayContext = createContext<OverlayProps|null>(null)
export function OverlayProvider({ children }: { children: ReactNode }) {
const [ subChildren, setSubChildren ] = useState<ReactNode>(null)
return <OverlayContext.Provider value={{
setChildrens: setSubChildren
}}>
{children}
{subChildren}
</OverlayContext.Provider>
}
export function OverlayWrapper({ children }: { children: ReactNode }) {
const { setChildrens } = useContext(OverlayContext) as OverlayProps
useEffect(() => {
setChildrens(children)
return () => {
setChildrens([])
}
}, [])
return <></>
}
The OverlayWrapper sets the subChildren context to be it's own children.
If my question isn't clear, please tell me, I'm going to correct