title: "TypeError: props.todos.map is not a function" can't figure out what the cause is?
body: <p>I am trying to create my first Todo list with React.js. I am trying to change the state from</p>
  <p><code>const [todos, setTodos] = useState([])</code></p>
  <p>To:</p>
  <pre><code>const [todos, setTodos] = useState({
      todo: [],
      isCompleted: false,
    })
  </code></pre>
  <p>Just to try and add in a isCompleted state. However, when I change it, I get an error when running my application from a previously working map. The error is in the title.</p>
  <p>Could somebody tell me what is wrong?</p>
  <p>Code:</p>
  <p><strong>TodosApp.js</strong></p>
  <pre><code>import React, { useState } from &quot;react&quot;
  import Todos from &quot;./Todos&quot;
  
  const TodoApp = () =&gt; {
    const [todos, setTodos] = useState({
      todo: [],
      isCompleted: false,
    })
    const [input, setInput] = useState(&quot;&quot;)
  
    const handleCurrentInput = (e) =&gt; {
      setInput(e.target.value)
    }
    const handleSubmit = (e) =&gt; {
      e.preventDefault()
      console.log(input)
      setInput(&quot;&quot;)
      setTodos({
        ...todos,
        task: input,
        isCompleted: false,
      })
    }
  
    const handleDelete = ({ index }) =&gt; {
      const newTodos = [...todos]
      newTodos.splice(index, 1)
      setTodos(newTodos)
    }
  
    return (
      &lt;div id=&quot;todoForm&quot;&gt;
        &lt;div class=&quot;container&quot;&gt;
          &lt;div class=&quot;todo_form&quot;&gt;
            &lt;div class=&quot;todo_input&quot;&gt;
              &lt;form onSubmit={handleSubmit}&gt;
                &lt;input
                  type=&quot;text&quot;
                  id=&quot;input_todo&quot;
                  onChange={handleCurrentInput}
                  value={input}
                /&gt;
              &lt;/form&gt;
              &lt;Todos todos={todos} handleDelete={handleDelete} /&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    )
  }
  
  export default TodoApp
  
  </code></pre>
  <p><strong>Todos.js</strong></p>
  <pre><code>import React, { useState } from &quot;react&quot;
  
  const Todos = (props) =&gt; {
    return (
      &lt;ul&gt;
        {props.todos.map((todo, index) =&gt; {
          return (
            &lt;li key={todo}&gt;
              {todo}
              &lt;button onClick={() =&gt; props.handleDelete({ index })}&gt;
                Delete
              &lt;/button&gt;
            &lt;/li&gt;
          )
        })}
      &lt;/ul&gt;
    )
  }
  
  export default Todos
  
  </code></pre>