MERN Delete

Let's add a new table cell

App.js

<tbody>
  {holidays.map((holiday) => {
    return (
      <tr key={holiday.id}>
        <td> {holiday.name}</td>
        <td>X</td>
      </tr>
    );
  })}
</tbody>

Let's add a function called delete holiday. It will do two things, make a call to our api to delete the holiday and then update our view to reflect our data

const deleteHoliday = async (id) => {
  const response = await fetch(`/api/holidays/${id}`, {
    method: "DELETE",
    headers: {
      "Content-Type": "application/json",
    },
  });
  if (response.ok) {
    setHolidays(holidays.filter((day) => day.id !== id));
  }
};

Now we'll add a click event to our new td

gotcha in order to pass an argument in our click event we have to wrap our function inside an anonymous function

<td onClick={() => deleteHoliday(holiday.id)}>X</td>;