Snow Leopards - Alia Athman

[aliaathman]

No description provided.

[marciaga]

Good effort! The wave 02 and 03 are missing functionality and the tests don't pass unfortunately. I left some specific comments below.

[marciaga]

Close! I think you meant to call the update function setMessageData instead of trying to reassign it, like so:

    setMessageData((messageData) =>
      messageData.map((message) => {
        if (message.id === id) {
          return {
            ...message,
            liked: !message.liked,
          };
        } else {
          return message;
        }
      })
    );

Note the callback function passed to setMessageData and that you should set liked by flipping the previous liked state.

[marciaga]

You should be passing messageData down to the <ChatLog /> component. Otherwise updating the state will have no effect on the data you're currently passing (you're just passing the original data, not the data you added to the component state.

[marciaga]

Generally you should avoid committing commented out code when submitting a PR.

[marciaga]

The React convention for naming the argument passed to a function component is props.

[marciaga]

This import isn't being used, so we should delete this line. Extraneous imports should be omitted.

[marciaga]

Since you're not passing the liked prop into this component, you won't be able to set the red vs white heart emoji using that prop. If you did pass the prop, you could set that like

{props.liked ?  <red-heart-emoji-goes-here> : 🤍}

[marciaga]

Good job updating this code! There's one substantial comment I left about not directly manipulating the DOM in a React app.

[marciaga]

We should avoid directly manipulating the DOM in this way when working in React. React is essentially purpose built to update the DOM when responding to state changes.