Doit v2 more from Doit

Doit v2 more from Doit

My React based To-Do List

Doit deletion button

What we gotta do to delete an entry? We can't just not display it, we have to alter state enough to remove the entry from the array entirely.

function DeleteButton({ idx, entryArray, setEntryArray }) {
  //Delete an entry from the array state
  function delEntry() {
    entryArray.splice(idx, 1);
    entryArray.sort(function (a, b) {
      return a.priority - b.priority;
    });
    setEntryArray(entryArray.slice());
    //Update entryArray in localstorage
    let str = JSON.stringify(entryArray);
    localStorage.setItem("entryArray", str);
  }

  return (
    <img
      src="/delete.png"
      alt="Delete Button"
      className="delButton"
      onClick={delEntry}
    />
  );
}

delEntry splices the entryArray and removes the entry at the given index, idx. The entries are re-sorted by priority, and then stringified and placed into local storage. It's really quite simple, but big news: this deletes EVERYTHING From our entry, and deletes it from our entryArray. This is accomplished by the

entryArray.splice(idx, 1);

line. Everything else is gravy. We call .splice on the entryArray, taking the entry at idx, and deleting it (and only it, based on the 1 we pass in) and boom. We donezo.

ezpz. Now the garbage-can icon that loads with every entry will serve to delete it from the entryArray entirely and resort. Donezo! Next up is crossing out entries. Do you need to see it? Let me know in the comments!