title: How do I write a delete handler function with React Hooks?
body: <p>I am creating a flashcard app in React using hooks and having trouble deleting a deck of flashcards. I am able to render Bootstrap cards on the page with the flashcards name, description, card count, and the buttons as desired. However, I am unable to delete a deck of cards as I'm being told <code>setFlashcards</code> is not a function. Here is my code:</p>
  <p>App.js</p>
  <pre><code>function Layout() {
    const [flashcards, setFlashcards] = useState([])
  
    useEffect(() =&gt; {
      axios
      .get('http://localhost:5000/decks?_embed=cards')
      .then(res =&gt; {
        setFlashcards(res.data.map((questionItem, index) =&gt; {
          return {
            id: `${index}-${Date.now()}`,
            name: questionItem.name,
            description: questionItem.description,
            cards: questionItem.cards.length,
          }
        }))
      })
    }, [])
  
    return (
      &lt;div&gt;
        &lt;Header /&gt;
        &lt;ShowAllDecks flashcards={flashcards} setFlashcards={setFlashcards} /&gt;
        &lt;NotFound /&gt;
      &lt;/div&gt;
    )
  }
  </code></pre>
  <p>ShowAllDecks.js</p>
  <pre><code>function ShowAllDecks({ flashcards, setFlashcards }) {
  
      return (
          &lt;div className='container'&gt;
              &lt;button&gt;Create New&lt;/button&gt;
              {flashcards.map((flashcard) =&gt; {
                  return &lt;Deck flashcards={flashcards} flashcard={flashcard} key={flashcard.id} /&gt;
              })}
          &lt;/div&gt;
      )
  }
  </code></pre>
  <p>Deck.js</p>
  <pre><code>function Deck({ flashcard, flashcards, setFlashcards }) {
      const deleteHandler = () =&gt; {
          setFlashcards(flashcards.filter(el =&gt; el.id !== flashcard.id))
      }
  
  
      return (
          &lt;div className='container'&gt;
              &lt;div className='card'&gt;
                  &lt;div className='card-body'&gt;
                      &lt;h3 className='card-title'&gt;{flashcard.name}&lt;/h3&gt;
                      &lt;p className='card-text'&gt;{flashcard.description}&lt;/p&gt;
                      &lt;p className='card-text'&gt;{flashcard.cards} cards&lt;/p&gt;
                      &lt;button&gt;View&lt;/button&gt;
                      &lt;button&gt;Study&lt;/button&gt;
                      &lt;button onClick={deleteHandler}&gt;Delete&lt;/button&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      )
  }
  </code></pre>
  <p>Example of a deck with one card:</p>
  <pre><code>[
    {
      'id': 1,
      'name': 'A Deck Name'
      'description': 'A Deck Description',
      'cards': [
        {
          'id': 1,
          'front': 'Front of card',
          'back': 'Back of card',
          'deckId': 1
        }
      ]
    }
  ]
  </code></pre>