Simple To-Do List with React, Array.filter is not working as expected?

byMR

May 25, 2022

I’m trying to make a function to delete the "clicked" task but I can’t figure out what is the problem.

I created an array with useState where I save all tasks.
When task is created is asigned to a key ( i ).
When delete button is clicked, trigger deleteTask function with ( i )
parameter.
DeleteTask function expect a parameter which is the task key.
A new variable is created where I do a filter to the array and ask
for an array with all the values less the one with the specified
key. Here is the problem the same array is returned and nothing
is deleted because I’m setting the same array

Any idea what I’m doing wrong?

Thank you in advance!!

const { useState } = React;

function Todo() {

  const [item, setItem] = useState("");
  const [itemArray, setItemArray] = useState([]);

  function addItem() {
    setItemArray((prev) => {
      return [...prev, item];
    });
    setItem("");
  }

  function handleChange(event) {
    const { value } = event.target;
    setItem(value);
  }

  function deleteTask(key) {
    const newItemArray = itemArray.filter((task) => task.key != key);

    console.log(newItemArray);
    console.log(key);

    setItemArray(newItemArray);
  }

  return (
    <div className="container">
      <div className="heading">
        <h1>To-Do List</h1>
      </div>
      <div className="form">
        <input type="text" onChange={handleChange} value={item} />
        <button onClick={addItem}>Add</button>
      </div>
      <div>
        <ul>
          {itemArray.map((task, i) => {
            return (
              <li key={i}>
                {task}
                <button
                  key={i}
                  onClick={() => deleteTask(i)}
                  className="">Borrar
                </button>
              </li>
            );
          })}
        </ul>
      </div>
    </div>
  );

}

ReactDOM.render(
  <Todo />,
  document.getElementById('react')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<div id="react"></div>

>Solution :

You are looking for a key property when filtering your array on the deleteTask function. You should instead compare the selected task to the index of your current element.

const newItemArray = itemArray.filter((task, index) => index != key);