title: How to fix: React-Context - TypeError: Object is not iterable (cannot read property Symbol(Symbol.iterator))
body: <p>I have tried some solutions that came by, <a href="https://stackoverflow.com/questions/60968735/object-is-not-iterable-error-while-using-react-context">on this link</a> particularily...</p>
  <p>I tried changing value inside my TodosContext.js file.. which didn't work, too..
  One more thing that I have tried is to call useContext() function from another component, that didn't work neither..</p>
  <p>Here's my code.
  App.js:</p>
  <pre><code>import React, { useState, useContext } from 'react';
  import TodoList from './components/TodoList';
  import NewTodo from './components/NewTodo';
  import { TodosProvider, TodosContext } from './components/contextapi/TodosContext';
  
  function App() {
  
    const [input, setInput] = useState('');
    const [todos, setTodos] = useContext(TodosContext);
  
    const _handleInput = (e) =&gt; {
      setInput(e.target.value)
    }
  
    const _todoAdd = (e) =&gt; {
      if (e.key === 'Enter') {
        setTodos(
          [...todos, { content: input, id: Date.now(), completed: false }]
        )
        setInput('')
      }
    }
  
    const _todoRemove = (id) =&gt; {
      const newTodos = todos.filter(todo =&gt; todo.id !== id)
      setTodos(newTodos)
    }
  
    return (
      &lt;div&gt;
        &lt;header&gt;
          &lt;h3&gt;To-Do Manager | Context API&lt;/h3&gt;
        &lt;/header&gt;
        &lt;TodosProvider&gt;
          &lt;NewTodo newTodo={_todoAdd} handleInput={_handleInput} newVal={input} /&gt;
          &lt;TodoList todos={todos} /&gt;
        &lt;/TodosProvider&gt;
      &lt;/div&gt;
    );
  }
  
  export default App;
  </code></pre>
  <p>TodosContext.js:</p>
  <pre><code>import React, { useState, createContext } from 'react';
  
  export const TodosContext = createContext()
  
  export const TodosProvider = ({ children }) =&gt; {
      const [todos, setTodos] = useState([]);
      return (
          &lt;TodosContext.Provider value={[todos, setTodos]}&gt;{children}&lt;/TodosContext.Provider&gt;
      )
  }
  
  </code></pre>
  <p>TodoList.js:</p>
  <pre><code>import React, { useContext } from 'react';
  import Todo from './Todo';
  import RemoveTodoFromList from './RemoveTodoFromList';
  import { TodosContext } from './contextapi/TodosContext'
  
  function TodoList() {
  
      const [todos, setTodos] = useContext(TodosContext);
  
      return (
          &lt;div&gt;
              {todos.map(todo =&gt; (
                  &lt;div&gt;
                      &lt;Todo key={todo.id} todo={todo} /&gt;
                  &lt;/div&gt;
              ))}
          &lt;/div&gt;
      )
  }
  
  export default TodoList
  
  </code></pre>
  <p>I'm really struggling with this one, I spent whole day figuring out what went wrong.. Thanks!</p>