# Fix TypeError Object Is Not Iterable in React

> Resolve the 'object is not iterable' TypeError in React by using correct destructuring syntax for objects vs arrays, especially with useContext

**URL:** https://sentry.io/answers/uncaught-typeerror-object-is-not-iterable-cannot-read-property-symbol-symbol-iterator-in-my-react-project/

---

## The Problem

You encounter the following error message when building a React application:

```
Uncaught TypeError: myobj is not iterable (cannot read property Symbol(Symbol.iterator))
```

## The Solution

This type of JavaScript error, [TypeError: 'x' is not iterable](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/is_not_iterable), occurs when a non-iterable object is used instead of an [iterable object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Iterators_and_generators#iterables).

You can resolve this error by ensuring you haven't used a non-iterable object when an iterable object is expected, such as in the following common scenarios:

- Using destructuring assignment syntax
- Looping over a JavaScript `Object`
- Accessing a context value with the `useContext` React hook

### Using the Incorrect Destructuring Syntax

A common cause for the object-is-not-iterable error is the use of array [destructuring assignment](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring) syntax on a non-iterable object:

```js
const myObj = { prop1: {}, prop2: [42] };

const {
  prop1: [value1], // {} is not iterable
  prop2: [value2],
} = myObj;
```

When using destructuring assignment syntax, be careful not to confuse curly braces `{}` with square brackets `[]`.

- If you are using array destructuring, ensure you use an array (with square brackets):

  ```js
  const myObj = { name: ["Gerald"] };

  const {
    name: [value],
  } = myObj;
  console.log(value); // Gerald
  ```

- If you are using object destructuring, ensure you use an object (with curly braces):

  ```js
  const myObj = { name: { first: "Gerald" } };

  const {
    name: { first },
  } = myObj;
  console.log(first); // Gerald
  ```

### Looping Over a JavaScript `Object`

The object-is-not-iterable error also commonly occurs when you try to loop over a JavaScript [`Object`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object), which is not iterable:

```js
for (const item of myObj) {
  console.log(item);
}
```

### Using Incorrect Destructuring Syntax With the `useContext` React Hook

In React, the object-is-not-iterable error often occurs when using [`Context`](https://react.dev/learn/passing-data-deeply-with-context#context-an-alternative-to-passing-props).

In the example code below, the [context provider](https://react.dev/reference/react/createContext#provider) value, which can be of any type, is an object that contains the `state` value object:

```jsx
import { createContext, useState } from "react";

export const GlobalContext = createContext();

export default function GlobalProvider({ children }) {
  const [state, setState] = useState({ name: "Gerald" });

  return (
    <GlobalContext.Provider
      value={{
        state,
      }}
    >
      {children}
    </GlobalContext.Provider>
  );
}
```

The [`useContext` hook](https://react.dev/reference/react/useContext) is used to get this context value in a component that is wrapped with the context provider:

```js
const [ globalState ] = useContext(GlobalContext);
```

However, running the above code causes the following error:

```
Uncaught TypeError: useContext is not a function or its return value is not iterable
```

This error occurs because you can't destructure an object using array destructuring.

When using the `useContext` React hook to access a context value, ensure that you use the correct destructuring assignment syntax.

If the context value is an object, use object destructuring:

```js
const { globalState } = useContext(GlobalContext);
```

### Notes

An iterable object has values that can be looped over, such as an [`Array`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array), [`String`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String), [`Map`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map), or [`Set`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set) object. Strings are [primitive](https://developer.mozilla.org/en-US/docs/Glossary/Primitive), but they can be created as objects using the [`String()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/String) constructor.

An iterable object must implement the [`[Symbol.iterator]()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol/iterator#description) method. This method returns the iterator for the object, which is used to obtain the values to be iterated.

---

*Source: [sentry.io/answers/uncaught-typeerror-object-is-not-iterable-cannot-read-property-symbol-symbol-iterator-in-my-react-project/](https://sentry.io/answers/uncaught-typeerror-object-is-not-iterable-cannot-read-property-symbol-symbol-iterator-in-my-react-project/)*