title: TypeError: .map is not a function
body: <p>I'am making a little To-Do app to learn more about ReactJS and React Hooks.
  The problem is that i don't understand what is wrong with the <code>list.map()</code> that i'am using. It keeps telling me that its not a function. But i don't see how im using it as a function in the first place?</p>
  
  <p>I have been look all over google to see what i'm doing wrong. i have tried changing my code in multiple ways but i can't seem to figure out what is wrong. As soon as i click my "Submit" button, it crashes and gives me the <code>TypeError: list.map is not a function</code> error.</p>
  
  <pre><code>function ToDoList() {
    const [list, setlist] = useState(["Test 1", "Test 2"]);
    const [newItem, setnewItem] = useState("");
  
    const handleChange = e =&gt; {
      setnewItem(e.target.value);
      console.log(newItem);
    };
  
    const handleSubmit = () =&gt; {
      setlist(...list, newItem);
    };
  
    return (
      &lt;div&gt;
        &lt;input onChange={handleChange} /&gt;
        &lt;button onClick={handleSubmit}&gt;Submit&lt;/button&gt;
        &lt;ul&gt;
          {list.map((item, index) =&gt; (
            &lt;li key={index}&gt;{item}&lt;/li&gt;
          ))}
        &lt;/ul&gt;
      &lt;/div&gt;
    );
  }
  
  function App() {
    return (
      &lt;div className="App"&gt;
        &lt;AppTitle /&gt;
        &lt;ToDoList /&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>
  
  <p>I'am trying to add the <code>newItem</code> to the <code>list</code> and render the list through .map().
  When i start the app, the "Test 1" and "Test 2" Render, but adding to the list and rerendering it crashes it.</p>