title: React.js TypeError: Invalid attempt to destructure non-iterable instance
body: <p>I make just simple "todo-list" with Hooks.</p>
  
  <p>This error doesn't reveals where is the problem so i don't know where to fix it.
  I searched for hint to solve this error, but i could find a little.</p>
  
  <p>What does this error message mean about my code?</p>
  
  <p>Here is my code.</p>
  
  <pre><code>//actions.js
  export const addTodo = todo =&gt; ({
    type: 'ADD_TODO',
    payload: {todo: todo}
  })
  
  //reducers.js
  export const todoReducer = (state, action) =&gt; {
    switch(action.type){
      case 'ADD_TODO':
        return { todoList: [...state.todo, action.payload]};
      default:
        return state;
    }
  }
  
  //store.js
  import * as React from 'react'
  import { todoReducer } from "./reducers";
  
  const initialState = {
    todoList: [],
  }
  
  export const Store = React.createContext(initialState)
  
  export const StoreProvider = ({children}) =&gt; {
    const [state, dispatch] = React.useReducer(todoReducer, initialState)
    return (
      &lt;Store.Provider value={{state, dispatch}}&gt;{children}&lt;/Store.Provider&gt;
    )
  }
  </code></pre>
  
  <pre><code>//component.jsx
  import React from "react";
  import { Store } from "./store";
  
  const TODOLIST = () =&gt; {
    const [state, dispatch] = React.useContext(Store)
    return(
      &lt;&gt;
        &lt;button onClick={() =&gt; dispatch({type: 'ADD_TODO', payload: state.todo})}&gt;ADD&lt;/button&gt;
        &lt;ul&gt;
          {state.todoList.map((tl, index) =&gt;
            &lt;li key={index}&gt;{tl}&lt;/li&gt;)}
        &lt;/ul&gt;
      &lt;/&gt;
    )
  }
  
  export default TODOLIST
  </code></pre>
  
  <pre><code>//App.jsx
  import TODOLIST from './component';
  
  function App() {
    return (
      &lt;&gt;
        &lt;TODOLIST /&gt;
      &lt;/&gt;
    );
  }
  
  export default App;
  
  </code></pre>
  
  <pre><code>//index.js
  import React from 'react';
  import ReactDOM from 'react-dom';
  import App from './App';
  import { StoreProvider } from "./store";
  
  ReactDOM.render(
    &lt;StoreProvider&gt;
        &lt;App /&gt;
    &lt;/StoreProvider&gt;,
  document.getElementById('root'));
  </code></pre>