title: Item in array getting deleted from top only
body: <p>I have an array off which I would like to delete elements upon clicking the delete button. However, the problem with this is that only the data at the gets deleted no matter where I click leaving the data at that index intact. I would like to know what I can do to ensure this works normally. Below is my code:</p>
  <pre><code>import { useEffect, useState } from &quot;react&quot;;
  
  const Task = () =&gt; {
      const [todos, setTodos] = useState([]);
  
  
      useEffect(() =&gt; {
          fetch('http://jsonplaceholder.typicode.com/todos')
              .then(res =&gt; res.json())
              .then(data =&gt; {
                  setTodos(data)
              })
      }, []);
  
      //Using splice
      // const deleteTodo = (index) =&gt; {
      //     const temp = [...todos];
      //     temp.splice(index, 1);
      //     setTodos(temp);
      //     console.log(index);
      //     // console.log(`newData : ${arr} || newLength : ${arr.length}`);
      //     console.log(`newLength : ${todos.length}`);
      // }
  
      //Using Filter
      const deleteTodo = (index) =&gt; {
          const newTodo = todos.filter(todo =&gt; todo.id !== index);
          setTodos(newTodo);
          console.log(`newLength : ${todos.length}`);
      }
  
      return (
          &lt;div className='container'&gt;
              &lt;table className='table'&gt;
                  &lt;tbody&gt;
                      {todos.map((key, value) =&gt; (
                          &lt;tr key={key.id}&gt;
                              &lt;td&gt;{todos[value].id}&lt;/td&gt;
                              &lt;td&gt;{todos[value].title}&lt;/td&gt;
                              &lt;td&gt;{`${todos[value].completed}`}&lt;/td&gt;
                              &lt;td&gt;
                                  &lt;button className='btn btn-danger ' onClick={() =&gt; deleteTodo(key)}&gt; Delete &lt;/button&gt;
                              &lt;/td&gt;
  
                          &lt;/tr&gt;
                      ))}
                  &lt;/tbody&gt;
              &lt;/table&gt;
              &lt;button className='btn btn-primary'&gt;Add Task&lt;/button&gt;
          &lt;/div&gt;
      );
  }
  export default Task;
  </code></pre>
  <p>I have tried both the splice and the filter methods.
  The splice method deletes data only off the top irrespective of the data I delete whereas the filter method doesn't do anything at all as shown on the snippet below. The length remains the same even after clicking the delete button.</p>
  <p><a href="https://i.stack.imgur.com/WMCL3.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/WMCL3.png" alt="enter image description here" /></a></p>