DevFlow

DevOverflow

Search
Menu
DevFlow

DevOverflow

Home menu icon

Home

Community menu icon

Community

Collections menu icon

Collections

Find Jobs menu icon

Find Jobs

Tags menu icon

Tags

Ask a question menu icon

Ask a question

    Menu

    Top Questions

    How to center a div?

    chevron

    How to do code parsing with React.js and NextJS?

    chevron

    How to get better at Nextjs?

    chevron

    Postgres: upgrade a user to be a superuser? ?

    chevron

    This is another test question

    chevron

    Popular Tags

    nextjs

    6

    React

    4

    next.js

    3

    reactjs

    3

    css

    3

    Profile

    Juan Cruz Cáceres

    upvote

    0

    downvote

    0

    star

    Context that overlay all my Views on React Native

    clock icon

    Asked 10 months ago

    message

    0 Answers

    eye

    1 Views

    0

    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

    React
    react native
    react context

    Write your answer here

    0 Answers