TypeError: Object is not iterable (cannot read property Symbol(Symbol.iterator))

Question

I tried running this code, but it's giving me a runtime error saying

TypeError: Object is not iterable (cannot read property Symbol(Symbol.iterator))

here is the code.

import React, { useContext} from "react";
import { GlobalContext } from '../GlobalState';

const MediaCard = ({ songs, categotyTitle }) => {
  const [{}, dispatch] = useContext(GlobalContext);
  const setCurrentVideoSnippet = data => {
    dispatch({ type: "setCurrentVideoSnippet", snippet: data });
  };
export default MediaCard;

the error is pointing at this line of code const [{}, dispatch] = useContext(GlobalContext);

the GlobalState code

import React, { useReducer } from "react";

export const GlobalContext = React.createContext();

const initialState = {
  currentVideoSnippet: {}, 
};

const reducer = (state, action) => {
  switch (action.type) {
    case "setCurrentVideoSnippet":
      return {
        ...state,
        currentVideoSnippet: action.snippet
      };
 default:
      return state;
  }
};

export const GlobalState = props => {
  const globalState = useReducer(reducer, initialState);
  return (
    <GlobalContext.Provider value={globalState}>
      {props.children}
    </GlobalContext.Provider>
  );
};

Answer 1

I know this doesn't solve the OP's issue, but for those like me who wound up on this page with the same run time error message, my issue was caused because of the way I was importing the GlobalContext component.

Wrong Way: import GlobalContext from '../GlobalState';

Correct Way: import { GlobalContext } from '../GlobalState';

This fixed the issue I was running into with the same error message.

Answer 2

It looks like you forgot to wrap your component with provider you created as you currently use it:

<GlobalState>
  <MediaCard />
</GlobalState>