How to use context within same component file using react and typescript?

Question

I want to access the state from one component to another. To do so i want to wrap contextprovider only to the component where state changes on clicking a button and return state from a usehook so that another component can access the state.

below is how the componnet looks without context applied,

function UploadButton () { //this is where state is set
    const [isDialogOpen, setIsDialogOpen] = React.useState(false); 
     
    const handleClick = () => {
        setIsDialogOpen(!isDialogOpen);
    }
    return (
        <>
            <Button onClick={handleClick}/>
            {isDialogOpen && <Upload/>}
        </>
    ); 
}

function UserButton() { //this is where state is accessed
    return (
        <Icon/> //this icon should be displayed only if !isDialogOpen
    );
}

With context looks like below, I have DialogContext within same file where UploadButton is.

 interface DialogCtxState {
     isDialogOpen: boolean;
     setIsDialogOpen: React.Dispatch<React.SetStateAction<boolean>>;
 }

 const initialDialogState: DialogCtxState = {
     isDialogOpen: false,
     setIsDialogOpen: () => {},
 };

 const DialogContext = React.createContext<DialogCtxState>(
     initialDialogState  
 );

 export const DialogContextProvider: React.FC = ({ children }) => {
     const [isDialogOpen, setIsDialogOpen] = React.useState<boolean>(false); 

     return (
         <DialogContext.Provider
             value={{
                 isDialogOpen,
                 setIsDialogOpen,
             }}
         >
            {children}
         </DialogContext.Provider>
    );
}

function UploadButton () {
    const {isDialogOpen, setIsDialogOpen} = React.useContext(DialogContext);
     

    const handleClick = () => {
         setIsDialogOpen(!isDialogOpen);
         console.log('isDialogOpen', isDialogOpen) //prints false here.
    }

    return (
        <DialogContextProvider>
            <>
                <Button onClick={handleClick}/>
                {isDialogOpen && <Upload/>} //this doesnt render on clicking button as isDialogOpen 
                //is false
            </>
        </DialogContextProvider>
    );
}

The above snippet doesn't render the Upload component as isDialogOpen is always false no matter if I click the button.

I am not knowing what is wrong. could someone help me with this? thanks.

Robert Cooper · Accepted Answer · 2020-07-17 06:17:23Z

6

The issue is that you need to move your context provider one level higher in your react components in order to use useContext in you UploadButton component. You cannot place the context provider inside of UploadButton in order to use it's context. You need to move the provider into a parent component.

Here's a codesandbox demostrating it.

edited Jul 17, 2020 at 6:17

answered Jul 17, 2020 at 6:08

Robert Cooper

2,2601 gold badge13 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

someuser2491 Over a year ago

thanks but it is not updating. everything seems fine but this doesnt work.

Robert Cooper Over a year ago

@someuser2491 updated my answer with what I think is the solution to your issue

Collectives™ on Stack Overflow

How to use context within same component file using react and typescript?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related