CODEWITHSUNDEEP
javascriptreactjsfrontend
Aitezaz Shah
Aitezaz Shah

Reputation: 21

I am getting an error "Uncaught TypeError: undefined is not iterable (cannot read property Symbol(Symbol.iterator))". Unable to find solution

const Header = () => {
const firebaseAuth = getAuth(app);
const provider = new GoogleAuthProvider();
const [{user}, dispatch] = useStateValue(); 

const login = async () =>{
    const {
        user: { refreshToken, providerData },
    } = await signInWithPopup(firebaseAuth, provider);
    dispatch({
        type: actionType.SET_USER,
        user: providerData[0],
    });
};

import React, { createContext, useContext, useReducer } from "react";
export const StateContext = createContext();
export const StateProvider = ({ reducer, initialState, children }) => (
  // initial state is already defined as user : null
  // children is basically our component
  <StateContext.Provider value={useReducer(reducer, initialState)}>
    {children}
  </StateContext.Provider>
);
// Custome Hook
export const useStateValue = () => {
  useContext(StateContext);
};

I am using context api to create a data layer at the top of all components. But I am trying that when the user logged in the user information stored in a state and gets updated. But here I am getting an error at const [{user}, dispatch] = useStateValue();

Upvotes: 1

Views: 170

Answers (1)

Aitezaz Shah
Aitezaz Shah

Reputation: 21

The problem was in where useStateValue was defined. I actually mistakenly add curley braces while making a custom hook

Upvotes: 1

Related Questions