title: Removing a value from an array using redux toolkit
body: <p>I am new to using &quot;@reduxjs/toolkit&quot; (version &quot;^1.5.1&quot;).</p>
  <p>I am trying to remove an object from within the state's array (roundScore). This is usually something that is very simple to do using <code>filter()</code>. For some reason this isn't working and I can't figure out why. Here's my code:</p>
  <p>Reducer slice:</p>
  <pre><code>import { createSlice } from &quot;@reduxjs/toolkit&quot;;
  
  export const roundScoreSlice = createSlice({
      name: &quot;roundScore&quot;,
      initialState: {
          roundScore: [],
      },
  
      reducers: {
          deleteArrow: (state, action) =&gt; {
              console.log(`action.payload = ${action.payload}`); // returns correct id
  
              state.roundScore.filter((arrow) =&gt; arrow.id !== action.payload);
          },
      },
  });
  
  export const { deleteArrow } = roundScoreSlice.actions;
  
  export default roundScoreSlice.reducer;
  </code></pre>
  <p>React component:</p>
  <pre><code>import React from &quot;react&quot;;
  import styled from &quot;styled-components&quot;;
  import { motion } from &quot;framer-motion&quot;;
  import { useDispatch } from &quot;react-redux&quot;;
  import { deleteArrow } from &quot;../../redux-reducers/trackSession/roundScoreSlice&quot;;
  
  export default function InputtedScore({
      arrowScore,
      id,
      initial,
      animate,
      variants,
  }) {
      const dispatch = useDispatch();
  
      const applyStyling = () =&gt; {
          switch (arrowScore) {
              case 0:
                  return &quot;miss&quot;;
              case 1:
                  return &quot;white&quot;;
              case 2:
                  return &quot;white&quot;;
              case 3:
                  return &quot;black&quot;;
              case 4:
                  return &quot;black&quot;;
              case 5:
                  return &quot;blue&quot;;
              case 6:
                  return &quot;blue&quot;;
              case 7:
                  return &quot;red&quot;;
              case 8:
                  return &quot;red&quot;;
              case 9:
                  return &quot;gold&quot;;
              case 10:
                  return &quot;gold&quot;;
              default:
                  return null;
          }
      };
  
      return (
          &lt;ParentStyled
              id={id}
              initial={initial}
              animate={animate}
              variants={variants}
              onClick={() =&gt; dispatch(deleteArrow(id))}
          &gt;
              &lt;Circle className={applyStyling()}&gt;
                  {arrowScore}
                  &lt;IconStyled&gt;
                      &lt;IoIosClose /&gt;
                  &lt;/IconStyled&gt;
                  &lt;IoIosClose className=&quot;redCross&quot; /&gt;
              &lt;/Circle&gt;
          &lt;/ParentStyled&gt;
      );
  }
  </code></pre>
  <p>The state after adding 2 arrows would look like this:</p>
  <pre><code>roundScore: [
      {
          id:&quot;e0f225ba-19c2-4fd4-b2bf-1e0aef6ab4e0&quot;
          arrowScore:7
      },
  
      {
          id:&quot;2218385f-b37a-4f2c-a8db-4e7e65846171&quot;
          arrowScore:5
      }
  ]
  </code></pre>
  <p>I've tried a combination of things.</p>
  <ul>
  <li>Using e.target.id within dispatch</li>
  <li>Using e.currentTarget.id within dispatch</li>
  <li>Using ({id}) instead of just (id) within dispatch</li>
  <li>Wrapping the reducer function with or without braces e.g. within <code>(state, action) =&gt; { /* code */ }</code></li>
  </ul>
  <p>What is it I'm missing? I know this is going to be a simple fix but for some reason it's eluding me.</p>
  <p>Any help is much appreciated.</p>