title: Why isn't my useState hook working in this React component?
body: <p>I've been stuck on this all day, and I'd appreciate some help. Thanks in advance.</p>
  <p>At first I was writing it like this, but I'd get a <strong>type error: todos.map is not a function</strong>.</p>
  <pre><code>function toggleState() {
    setTodos(state =&gt; ({ ...state, isComplete: !state.isComplete }))
  }
  </code></pre>
  <p>Finally I realized that error was because it was returning todos as an object, so I tried this:</p>
  <pre><code>function toggleState() {
          setKeywords(state =&gt; [{ ...state, isUsed: !state.isUsed }])
      }
  </code></pre>
  <p>Now I'm not getting the type error, but it's still not working as expected. Here's the state before toggleState:</p>
  <pre><code>[
    {
      &quot;name&quot;: &quot;State&quot;,
      &quot;value&quot;: [
        {
          &quot;todo&quot;: &quot;Learn React&quot;,
          &quot;id&quot;: &quot;91bad41d-1561-425a-9e77-960f731d058a&quot;,
          &quot;isComplete&quot;: false
        }
      ]
  </code></pre>
  <p>and here's state after:</p>
  <pre><code>[
    {
      &quot;name&quot;: &quot;State&quot;,
      &quot;value&quot;: [
        {
          &quot;0&quot;: {
            &quot;todo&quot;: &quot;Learn React&quot;,
            &quot;id&quot;: &quot;91bad41d-1561-425a-9e77-960f731d058a&quot;,
            &quot;isComplete&quot;: false
          },
          &quot;isComplete&quot;: true
        }
      ]
  </code></pre>
  <p>Here's the rest of my code:</p>
  <pre><code>import React, { useState, useEffect } from 'react'
  import { uuid } from 'uuidv4'
  import { Form, FormGroup, Input, Button } from 'reactstrap'
  
  function Example(props) {
      const [todos, setTodos] = useState([])
  
      // Run when component first renders
      useEffect(() =&gt; {
          console.log('useEffect component first rendered')
          if (localStorage.getItem('todoData')) {
              setTodos(JSON.parse(localStorage.getItem('todoData')))
          }
      }, [])
  
      // Run when todos state changes
      useEffect(() =&gt; {
          console.log('useEffect todos changed')
          localStorage.setItem('todoData', JSON.stringify(todos))
      }, [todos])
  
      const [formInput, setFormInput] = useState()
  
      function handleChange(e) {
          setFormInput(e.target.value)
      }
  
      function handleSubmit(e) {
          e.preventDefault()
          setTodos(prev =&gt; prev.concat({ todo: formInput, id: uuid(), isComplete: false }))
          setFormInput('')
      }
  
      function toggleState() {
          setTodos(state =&gt; [{ ...state, isComplete: !state.isComplete }])
      }
  
      return (
          &lt;div className='text-center'&gt;
              &lt;div className='mb-2 border text-center' style={{ height: '300px', overflowY: 'scroll' }}&gt;
                  {todos.map(todo =&gt; (
                      &lt;p className={todo.isUsed ? 'text-success my-1' : 'text-danger my-1'} key={todo.id}&gt;
                          {todo.todo}
                      &lt;/p&gt;
                  ))}
              &lt;/div&gt;
              &lt;Form onSubmit={handleSubmit}&gt;
                  &lt;FormGroup&gt;
                      &lt;Input onChange={handleChange} type='text' name='text' id='todoForm' placeholder='Enter a todo' value={formInput || ''} /&gt;
                      &lt;Button&gt;Set Todo&lt;/Button&gt;
                  &lt;/FormGroup&gt;
              &lt;/Form&gt;
              &lt;Button onClick={toggleState}&gt;Toggle isComplete&lt;/Button&gt;
          &lt;/div&gt;
      )
  }
  
  export default Example
  </code></pre>