title: Reducer not always deleting the correct item
body: <p>My delete callback is sending the correct id but I tested out the reducer with a few console logs and it's not working correctly.So I have a list of components in a menu that I can add to the &quot;board&quot;.  I notice that if I add only notes for example, it will delete the last one every time. But if I had one note, then one todo list, and another note, if I try to delete the first note, it will delete that one correctly.</p>
  <p>reducer</p>
  <pre><code>export default function reducer(state: any, action: any) {
    switch (action.type) {
      case &quot;ADD_COMPONENT&quot;:
        return {
          ...state,
          components: [...state.components, action.payload],
        };
      case &quot;DELETE_COMPONENT&quot;:
        return {
          ...state,
          components: state.components.filter(
            // actual code
            (component: any) =&gt;  component.id !== action.payload),
            //test code to check what ids were being passed in
            //(component: any) =&gt; { console.log(component.id, action.payload), console.log(component.id !== action.payload), component.id == action.payload }),
        };
  
      default:
        return state;
    }
  }
  
  </code></pre>
  <p>The Delete case has a line I was using to test to see what ids were being passed in.</p>
  <p>The context</p>
  <pre><code>import React, { createContext, useReducer, useState } from &quot;react&quot;;
  import ComponentReducer from &quot;./ComponentReducer&quot;;
  
  const NewComponentState: NewComponentsState = {
    components: [],
    addComponent: () =&gt; {},
    deleteComponent: () =&gt; {},
  };
  
  export const NewComponentContext =
    React.createContext&lt;NewComponentsState&gt;(NewComponentState);
  
  export const NewComponentProvider: React.FC = ({ children }) =&gt; {
    const [state, dispatch] = useReducer(ComponentReducer, NewComponentState);
  
    const addComponent = (component: any) =&gt; {
      dispatch({
        type: &quot;ADD_COMPONENT&quot;,
        payload: component
      });
    };
    const deleteComponent = (id: any) =&gt; {
      dispatch({
        type: &quot;DELETE_COMPONENT&quot;,
        payload: id,
      });
    };
  
    return (
      &lt;NewComponentContext.Provider
        value={{ components: state.components, deleteComponent, addComponent }}
      &gt;
        {children}
      &lt;/NewComponentContext.Provider&gt;
    );
  };
  </code></pre>
  <p>The Note component that I've been using to test this</p>
  <pre><code>import { Menu,Transition } from &quot;@headlessui/react&quot;;
  import React, { useState, Fragment, useContext } from &quot;react&quot;;
  import NoteColorChanger from &quot;./NoteColor&quot;;
  import Draggable from 'react-draggable';
  import { NewComponentContext } from &quot;../../../Context/NewComponentContext&quot;;
  
  interface INote {
    id: any
  }
  const Note: React.FC &lt;INote&gt; = ({ id }) =&gt; {
    const [content, setContent] = useState&lt;string&gt;()
    const [title, setTitle] = useState&lt;string&gt;()
    const [color, setColor] = useState&lt;any&gt;()
    const [position, setPosition] = useState&lt;any&gt;({x: 0, y: 0})
  
    const { components, deleteComponent } = useContext(NewComponentContext)
  
    const handleChange = (event: React.ChangeEvent&lt;HTMLInputElement&gt;) =&gt; {
      setContent(event.target.value)
    };
  
    const handleColor = (notecolor: any) =&gt; {
      setColor(notecolor)
    }
  
    const trackPosition = (pos:any) =&gt; {
      setPosition({x: pos.x, y: pos.y})
    }
  
    const deleteNote = () =&gt; {
      deleteComponent(id)
    }
  
    return ( 
      &lt;div className={`${color} h-64 w-64 bg-yellow-200 text-black rounded-lg p-2 shadow-lg`}&gt;
        &lt;div className=&quot;flex justify-between items-center pb-6&quot;&gt;
          &lt;h1 className=&quot;font-bold font-Inter&quot;&gt;Note&lt;/h1&gt;
          &lt;Menu&gt;
            &lt;Menu.Button&gt;
              &lt;div className={`hover:${color} p-1 rounded-lg ease-in-out duration-100`}&gt;
                &lt;svg
                  xmlns=&quot;http://www.w3.org/2000/svg&quot;
                  className=&quot;h-6 w-6&quot;
                  fill=&quot;none&quot;
                  viewBox=&quot;0 0 24 24&quot;
                  stroke=&quot;currentColor&quot;
                &gt;
                  &lt;path
                    strokeLinecap=&quot;round&quot;
                    strokeLinejoin=&quot;round&quot;
                    strokeWidth={1}
                    d=&quot;M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z&quot;
                  /&gt;
                &lt;/svg&gt;
              &lt;/div&gt;
            &lt;/Menu.Button&gt;
            &lt;Transition
              as={Fragment}
              enter=&quot;transition ease-out duration-100&quot;
              enterFrom=&quot;transform opacity-0 scale-95&quot;
              enterTo=&quot;transform opacity-100 scale-100&quot;
              leave=&quot;transition ease-in duration-75&quot;
              leaveFrom=&quot;transform opacity-100 scale-100&quot;
              leaveTo=&quot;transform opacity-0 scale-95&quot;
            &gt;
              &lt;Menu.Items
                as=&quot;div&quot;
                className={`bg-gray-100 font-Inter w-64 shadow-lg rounded-lg absolute translate-y-24 -translate-x-2 z-50`}
              &gt;
                &lt;Menu.Item&gt;
                  {({ active }) =&gt; (
                    &lt;div
                      id=&quot;color&quot;
                      className={` flex items-center py-2 px-3 rounded-lg w-full`}
                    &gt;
                      {&lt;NoteColorChanger handleColor={handleColor}/&gt;}
                      
                      
                    &lt;/div&gt;
                  )}
                &lt;/Menu.Item&gt;
                &lt;Menu.Item&gt;
                  {({ active }) =&gt; (
                    &lt;button
                      id=&quot;Todo&quot;
                      onClick={() =&gt; console.log(id)}
                      className={`${
                        active ? &quot;bg-blue-500 text-white&quot; : &quot;text-black&quot;
                      } flex items-center py-2 px-3 rounded-lg w-full`}
                    &gt;
                      &lt;svg
                        xmlns=&quot;http://www.w3.org/2000/svg&quot;
                        className=&quot;h-6 w-6 mr-3&quot;
                        fill=&quot;none&quot;
                        viewBox=&quot;0 0 24 24&quot;
                        stroke=&quot;currentColor&quot;
                      &gt;
                        &lt;path
                          strokeLinecap=&quot;round&quot;
                          strokeLinejoin=&quot;round&quot;
                          strokeWidth={2}
                          d=&quot;M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z&quot;
                        /&gt;
                      &lt;/svg&gt;
                      Edit Title
                    &lt;/button&gt;
                  )}
                &lt;/Menu.Item&gt;
                &lt;Menu.Item&gt;
                  {({ active }) =&gt; (
                    &lt;li
                      onClick={deleteNote}
                      className={`${
                        active ? &quot;bg-blue-500 text-white&quot; : &quot; text-black&quot;
                      } flex items-center py-2 px-3 cursor-pointer rounded-lg`}
                    &gt;
                      &lt;svg
                        xmlns=&quot;http://www.w3.org/2000/svg&quot;
                        className=&quot;h-6 w-6 mr-3&quot;
                        fill=&quot;none&quot;
                        viewBox=&quot;0 0 24 24&quot;
                        stroke=&quot;currentColor&quot;
                      &gt;
                        &lt;path
                          strokeLinecap=&quot;round&quot;
                          strokeLinejoin=&quot;round&quot;
                          strokeWidth={2}
                          d=&quot;M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16&quot;
                        /&gt;
                      &lt;/svg&gt;
                      Delete Note
                    &lt;/li&gt;
                  )}
                &lt;/Menu.Item&gt;
                
              &lt;/Menu.Items&gt;
            &lt;/Transition&gt;
          &lt;/Menu&gt;
        &lt;/div&gt;
  
        &lt;textarea
          className={`${color} bg-yellow-200 font-Inter w-full h-48 border-none focus:border-none focus:ring-0 resize-none`}
          onChange={() =&gt; {handleChange}}
        /&gt;
      &lt;/div&gt;
     
    );
  };
  export default Note;
  
  </code></pre>
  <p>Menu where the components are created</p>
  <pre><code>import React, { useContext, Fragment, useState } from &quot;react&quot;
  import { NewComponentContext } from &quot;../../Context/NewComponentContext&quot;
  import { Menu, Transition } from '@headlessui/react'
  import Note from &quot;./Note/Note&quot;;
  import TodoList from &quot;./Todo/TodoList&quot;;
  import Photo from &quot;./Photo/Photo&quot;;
  
  
  const NewComponentMenu = () =&gt; {
      const { addComponent } = useContext(NewComponentContext)
  
      const newComponent = (componentType: number) =&gt; {
          addComponent({id: Math.floor(Math.random() * 100000000), componentType: componentType})
      }
      return (
        &lt;div className=&quot;w-6 h-6 mt-4 ml-4 shadow-md text-gray-800 font-Inter z-50&quot;&gt;
          &lt;Menu&gt;
            &lt;Menu.Button&gt;
              &lt;div className=&quot;p-1 rounded-lg bg-blue-500 hover:bg-blue-600 ease-in-out duration-100&quot;&gt;
                &lt;svg
                  xmlns=&quot;http://www.w3.org/2000/svg&quot;
                  className=&quot;h-6 w-6 text-blue-50&quot;
                  viewBox=&quot;0 0 20 20&quot;
                  fill=&quot;currentColor&quot;
                &gt;
                  &lt;path
                    fillRule=&quot;evenodd&quot;
                    d=&quot;M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z&quot;
                    clipRule=&quot;evenodd&quot;
                  /&gt;
                &lt;/svg&gt;
              &lt;/div&gt;
            &lt;/Menu.Button&gt;
            &lt;Transition
              as={Fragment}
              enter=&quot;transition ease-out duration-100&quot;
              enterFrom=&quot;transform opacity-0 scale-95&quot;
              enterTo=&quot;transform opacity-100 scale-100&quot;
              leave=&quot;transition ease-in duration-75&quot;
              leaveFrom=&quot;transform opacity-100 scale-100&quot;
              leaveTo=&quot;transform opacity-0 scale-95&quot;
            &gt;
              &lt;Menu.Items as=&quot;div&quot; className=&quot;w-60 shadow-lg rounded-lg bg-white&quot;&gt;
                &lt;h1 className=&quot;text-center font-Inter text-2xl pb-2&quot;&gt;Items&lt;/h1&gt;
                &lt;Menu.Item&gt;
                  {({ active }) =&gt; (
                    &lt;button
                      id=&quot;Todo&quot;
                      onClick={() =&gt; newComponent(1)}
                      className={`${
                        active ? &quot;bg-blue-500 text-white&quot; : &quot;text-black&quot;
                      } flex items-center py-2 px-3 rounded-lg w-full`}
                    &gt;
                      &lt;svg
                        xmlns=&quot;http://www.w3.org/2000/svg&quot;
                        className=&quot;h-6 w-6 mr-3&quot;
                        fill=&quot;none&quot;
                        viewBox=&quot;0 0 24 24&quot;
                        stroke=&quot;currentColor&quot;
                      &gt;
                        &lt;path
                          strokeLinecap=&quot;round&quot;
                          strokeLinejoin=&quot;round&quot;
                          strokeWidth={2}
                          d=&quot;M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01&quot;
                        /&gt;
                      &lt;/svg&gt;
                      Todo list
                    &lt;/button&gt;
                  )}
                &lt;/Menu.Item&gt;
                &lt;Menu.Item&gt;
                  {({ active }) =&gt; (
                    &lt;li
                      //onClick={() =&gt; setComponent(&lt;Moodboard /&gt;) }
                      className={`${
                        active ? &quot;bg-blue-500 text-white&quot; : &quot; text-black&quot;
                      } flex items-center py-2 px-3 cursor-pointer rounded-lg`}
                    &gt;
                      &lt;svg
                        xmlns=&quot;http://www.w3.org/2000/svg&quot;
                        className=&quot;h-6 w-6 mr-3&quot;
                        fill=&quot;none&quot;
                        viewBox=&quot;0 0 24 24&quot;
                        stroke=&quot;currentColor&quot;
                      &gt;
                        &lt;path
                          strokeLinecap=&quot;round&quot;
                          strokeLinejoin=&quot;round&quot;
                          strokeWidth={2}
                          d=&quot;M14.828 14.828a4 4 0 01-5.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z&quot;
                        /&gt;
                      &lt;/svg&gt;
                      Mood Board
                    &lt;/li&gt;
                  )}
                &lt;/Menu.Item&gt;
                &lt;Menu.Item&gt;
                  {({ active }) =&gt; (
                    &lt;li
                      onClick={() =&gt; newComponent(2) }
                      className={`${
                        active ? &quot;bg-blue-500 text-white&quot; : &quot; text-black&quot;
                      } flex items-center py-2 px-3 cursor-pointer rounded-lg`}
                    &gt;
                      &lt;svg
                        xmlns=&quot;http://www.w3.org/2000/svg&quot;
                        className=&quot;h-6 w-6 mr-3&quot;
                        fill=&quot;none&quot;
                        viewBox=&quot;0 0 24 24&quot;
                        stroke=&quot;currentColor&quot;
                      &gt;
                        &lt;path
                          strokeLinecap=&quot;round&quot;
                          strokeLinejoin=&quot;round&quot;
                          strokeWidth={2}
                          d=&quot;M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z&quot;
                        /&gt;
                      &lt;/svg&gt;
                      Image
                    &lt;/li&gt;
                  )}
                &lt;/Menu.Item&gt;
                &lt;Menu.Item&gt;
                  {({ active }) =&gt; (
                    &lt;li
                      onClick={() =&gt; newComponent(3)}
                      className={`${
                        active ? &quot;bg-blue-500 text-white&quot; : &quot; text-black&quot;
                      } flex items-center py-2 px-3 cursor-pointer rounded-lg`}
                    &gt;
                      &lt;svg
                        xmlns=&quot;http://www.w3.org/2000/svg&quot;
                        className=&quot;h-6 w-6 mr-3&quot;
                        fill=&quot;none&quot;
                        viewBox=&quot;0 0 24 24&quot;
                        stroke=&quot;currentColor&quot;
                      &gt;
                        &lt;path
                          strokeLinecap=&quot;round&quot;
                          strokeLinejoin=&quot;round&quot;
                          strokeWidth={2}
                          d=&quot;M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z&quot;
                        /&gt;
                      &lt;/svg&gt;
                      Note
                    &lt;/li&gt;
                  )}
                &lt;/Menu.Item&gt;
              &lt;/Menu.Items&gt;
            &lt;/Transition&gt;
          &lt;/Menu&gt;
        &lt;/div&gt;
      );
    };
    
    export default NewComponentMenu;
  </code></pre>
  <p>component where the menu items are created</p>
  <pre><code>import React, { useContext } from &quot;react&quot;;
  import { NewComponentContext } from &quot;../Context/NewComponentContext&quot;;
  import NewComponentMenu from &quot;./NewComponents/NewComponentMenu&quot;;
  import Note from &quot;./NewComponents/Note/Note&quot;;
  import Photo from &quot;./NewComponents/Photo/Photo&quot;;
  import TodoList from &quot;./NewComponents/Todo/TodoList&quot;;
  
  const Board = () =&gt; {
      const { components } = useContext(NewComponentContext);
  
      const componentList  = components.map((component, i) =&gt; {
        if (component.componentType == 1) {
          return (
            &lt;div key={i}&gt;
              &lt;TodoList id={component.id} /&gt;
            &lt;/div&gt;
          );
        }
        else if (component.componentType == 2) {
          return (
            &lt;div key={i}&gt;
              &lt;Photo id={component.id} /&gt;
            &lt;/div&gt;
          ) 
        }
        else {
          return (
            &lt;div key={i}&gt;
              &lt;Note id={component.id} /&gt;
            &lt;/div&gt;
          )
          
        }
      });
    
      return (
        &lt;div className=&quot;flex space-x-10 mt-8&quot;&gt;
          &lt;NewComponentMenu /&gt;
          &lt;div className=&quot;grid grid-cols-6 gap-8&quot;&gt;{componentList}&lt;/div&gt;
        &lt;/div&gt;
      );
    };
    
    export default Board;
  </code></pre>