title: Deleting Specific Item From Array in React using Functional Components/Hooks
body: <p>I am trying to delete an item in an array. However, my delete button is not executing my code and the array remains unchanged. I am not sure what to do.</p>
  <p>My code is below:</p>
  <pre><code>//App.js
  
  import React, { useState } from &quot;react&quot;;
  import Overview from &quot;./components/Overview&quot;;
  
  function App() {
    const [task, setTask] = useState(&quot;&quot;);
    const [tasks, setTasks] = useState([]);
  
    function handleChange(e) {
      setTask(e.target.value);
    }
  
    function onSubmitTask(e) {
      e.preventDefault();
      setTasks(tasks.concat(task));
      setTask(&quot;&quot;);
    }
  
    //error happening here????---------------------------------------------------
    function removeTask(itemId) {
        setTasks(prevState =&gt; prevState.filter(({ id }) =&gt; id !== itemId));
    }
  
  
    return (
      &lt;div className=&quot;col-6 mx-auto mt-5&quot;&gt;
        &lt;form onSubmit={onSubmitTask}&gt;
          &lt;div className=&quot;form-group&quot;&gt;
            &lt;label htmlFor=&quot;taskInput&quot;&gt;Enter task&lt;/label&gt;
            &lt;input
              onChange={handleChange}
              value={task}
              type=&quot;text&quot;
              id=&quot;taskInput&quot;
              className=&quot;form-control&quot;
            /&gt;
          &lt;/div&gt;
          &lt;div className=&quot;form-group&quot;&gt;
            &lt;button type=&quot;submit&quot; className=&quot;btn btn-primary&quot;&gt;
              Add Task
            &lt;/button&gt;
          &lt;/div&gt;
        &lt;/form&gt;
        &lt;Overview tasks={tasks} removeTask={removeTask} /&gt;
      &lt;/div&gt;
    );
  }
  
  export default App;
  </code></pre>
  <p>Child Component:</p>
  <pre><code>import React from &quot;react&quot;;
  
  function Overview(props) {
    const { tasks, removeTask } = props;
    console.log(tasks)
    return (
      &lt;&gt;
        {tasks.map((task, index) =&gt; {
          return (
            &lt;&gt;
              &lt;p key={index}&gt;
                #{index + 1} {task}
              &lt;/p&gt;
              //this onClick isn't doing anything-------------------------------------
              &lt;button onClick={() =&gt; removeTask(index)}&gt;Delete Task&lt;/button&gt;
            &lt;/&gt;
          );
        })}
      &lt;/&gt;
    );
  }
  export default Overview;
  </code></pre>
  <p>My 'tasks' state gives me an array, with items inside as strings. However, when I tried to filter the array, that didn't work. So instead of filtering by value, I tried to filter by id/index. Since the index would match it I thought that would remove the item from the array, even if there is just one item, it doesn't remove anything and the delete button just console logs the given array.</p>
  <p>Any help would be greatly appreciated.</p>