Unable to access dispatch from useContext from components wrapped withAuthenticator.

[mfaizan1]

Describe the bug So i am trying to access context state on custom signup and confirm signup page although state is accessible dispatch function is undefined.

Note: store and dispatch are accessible in normal components not wrapped in withAuthenticator HOC.

here is my setup. i have simple store

import React, { createContext, useReducer } from "react";
import Reducer from "./UserReducer";

const initialState = {
    user: {},
    error: null
};

const Store = ({ children }) => {
    const [state, dispatch] = useReducer(Reducer, initialState);
    return (
        <Context.Provider value={[state, dispatch]}>
            {children}
        </Context.Provider>
    );
};

export const Context = createContext(initialState);
export default Store;

i have wrapped my app with it like

<Store>
    <ThemeProvider theme={Theme}>
        <CssBaseline />
        <Navbar />
        <Wrapper>
            <Profile />
        </Wrapper>
    </ThemeProvider>{" "}
</Store>

There is additional setup as well where my authentication pages are located in separate wrapper so i wrapped that with store as well.

here is code for that wrapper (extra removed).

import Store from "../../../context/Store";
export default function Wrapper({ children }) {
    const classes = useStyles();
    return (
        <Store>
           //different dumb containers opening
                {children}
          //different dumb containers closing
        </Store>
    );
}

Now when i try to access context within child component like

import React, { useContext } from "react";
import { Context } from "../../../context/Store";
import { SET_USER } from "../../../context/UserTypes";

function SignUp(props) {
    const [state, setState] = React.useState({ ...initialState });

    const [userData, dispatch] = useContext(Context);
    console.log(userData, dispatch, "check");
// rest of component

i get following error

TypeError: undefined is not a function

i tried to log result of useContext without destructuring it but all it had was global state but no dispatch function with it.

Reactjs version = 17.0.1

[joebuono]

Hello mfaizan1! Thank you for opening this issue, and apologies for our delayed response.

We replicated the code you gave us as much as possible and built a sample app (GitHub gist). We confirmed that we were able to access the dispatch method from useContext.

Can you show us how you’re using the withAuthenticator HOC in a code sample? As of now, there isn’t any Amplify code included in the snippets that you provided, and it would help us to see how and where you’re using withAuthenticator.

Also, which Amplify version were you using? It’s possible that this issue may have been resolved within the past six months.

[mfaizan1]

Hey @joebuono, i don't remember now what i did to get past that, and i don't have access to that piece of code anymore so we can close it of.

[github-actions[bot]]

This issue has been automatically locked since there hasn't been any recent activity after it was closed. Please open a new issue for related bugs.

Looking for a help forum? We recommend joining the Amplify Community Discord server *-help channels or Discussions for those types of questions.