How to use usecontext using react and typescript?

Question

i want to use usecontext within the childcomponents of component that is wrapped with context provider.

i want to set the loading state within the useAnother hook of parent comopnent and then have the loading state accessible to all child components.

below is my code,

export function useLoad() {
    const { refetch: refetchItems } = useGetItems();
    const { refetch: refetchOwnedItems } = useListOwnedItems();
    return async function() {
        await refreshCompany();
        refetchItems();
        refetchOwnedItems();
    };  
}

function useAnother(Id: string) {
    const [compId, setCompId] = React.useState(undefined);
    const [isLoading, setIsLoading] = React.useState(false);
    const comp = useCurrentComp(Id);
    const load = useLoad();
    if (comp && comp.id !== compId) {
        setCompId(comp.id);
        const prevCompId = compId !== undefined;
        if (prevCompId) {
            setIsLoading(true);
            load().then(() => {
                setIsLoading(false);
            });
        }
    }
} 

export const LoadingContext = React.createContext(true); 

function Main ({user}: Props) {
    const isLoading = useAnother(user.id); //fetching isLoading here from useHook
    return (
        <LoadingContext.Provider value={isLoading}> //also here error type                      void is not assignable to type boolean
            <Wrapper>
                <React.suspense>
                    <Switch>
                        <Route 
                            path="/" 
                            render={routeProps => (
                                <FirstComp {...routeProps} />
                            )}
                        />
                        <Route 
                            path="/items" 
                            render={routeProps => (
                                <SecondComp {...routeProps} />
                            )}
                        />
                        //many other routes like these
                    </Switch>
                </React.suspense>
            </Wrapper>
        </LoadingContext.Provider>
    );
}

function FirstComponent () {
    const isLoading = React.useContext(LoadingContext); //this throws error
}

accessing isLoading within FirstComponent throws error

argument of type ({user}: props) => Element or null is not assignable to parameter of type 'context'**

also get error for value prop where i use LoadingContext.Provider "type void is not assignable to type boolean"

could someone help me fix this. thanks

Józef Podlecki Józef Podlecki · Accepted Answer · 2020-06-09T22:06:10

useAnother(user.id); doesn't return boolean as required from createContext(true);

function useAnother(Id: string) {
    const [compId, setCompId] = React.useState(undefined);
    const [isLoading, setIsLoading] = React.useState(false);
    const comp = useCurrentComp(Id);
    const load = useLoad();
    if (comp && comp.id !== compId) {
        setCompId(comp.id);
        const prevCompId = compId !== undefined;
        if (prevCompId) {
            setIsLoading(true);
            load().then(() => {
                setIsLoading(false);
            });
        }
    }

    return isLoading
}

How to use usecontext using react and typescript?

1 Answers