Skip to main content

MERN Simple Update

We can alter the way our app looks (change CSS) based on our data.

We'll gray out our holidays based on whether or not we have celebrated them (a boolean, defaulted to false)

Let's write a toggle function

const toggleCelebrated = (holiday) => {
  fetch("/holidays/" + holiday._id, {
    method: "PUT",
    body: JSON.stringify({ celebrated: !holiday.celebrated }),
    headers: {
      "Content-Type": "application/json",
    },
  })
    .then((res) => res.json())
    .then((resJson) => {
      setHolidays(
        holidays.map((holiday) => {
          if (holiday._id === resJson._id) {
            return resJson;
          }
          return holiday;
        })
      );
      if (holiday._id === resJson._id) {
        setHoliday(resJson);
      }
    });
};

Add an event listener to the holiday name and toggle the css of the name. Again because we need to pass an argument we have to wrap our function in an anonymous function for our event handler

<td
  onDoubleClick={() => toggleCelebrated(holiday)}
  className={holiday.celebrated ? "celebrated" : null}
>
  {holiday.name} Day
</td>

Your turn​

Everyone​

Create the functionality to increase the number of likes by clicking an image of balloons

Increase Likes

Add two new tds

  • one that has the total number of likes
  • one that has an image of a balloon
<td>{holiday.likes}</td>
<td>
  <img src={balloons} alt="balloons" />
</td>

Bonus​

Modal Update

Create the functionality to update all the fields with a form that pops up as a modal:

  • make sure that the form is pre-populated with values
<td>
  <img src={pencil} alt="pencil" onClick={toggleUpdateForm} />
</td>