Snow Leopards - Alia Athman #113
Conversation
src/App.js
Outdated
| const [messageData,setMessageData] = useState(chatMessages) | ||
|
|
||
| const likeMessage = (id) => { | ||
| setMessageData = messageData => messageData.map(message => { |
There was a problem hiding this comment.
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.
src/App.js
Outdated
| {/* Wave 01: Render one ChatEntry component | ||
| Wave 02: Render ChatLog component */} | ||
| <ChatLog | ||
| entries={chatMessages} |
There was a problem hiding this comment.
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.
src/components/ChatLog.js
Outdated
| import './ChatLog.css' | ||
|
|
||
|
|
||
| // const entries = [ |
There was a problem hiding this comment.
Generally you should avoid committing commented out code when submitting a PR.
src/components/ChatLog.js
Outdated
| // ] | ||
|
|
||
|
|
||
| const ChatLog = ( entries ) => { |
There was a problem hiding this comment.
The React convention for naming the argument passed to a function component is props.
src/App.js
Outdated
| import React from 'react'; | ||
| import './App.css'; | ||
| import { useState } from 'react'; | ||
| import ChatEntry from './components/ChatEntry'; |
There was a problem hiding this comment.
This import isn't being used, so we should delete this line. Extraneous imports should be omitted.
| <button className="like">🤍</button> | ||
| <p>{props.body}</p> | ||
| <p className="entry-time"> <TimeStamp time={props.timeStamp}></TimeStamp> </p> | ||
| <button className="like" onClick={() => props.onLikeMessage(props.id)}>🤍</button> |
There was a problem hiding this comment.
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> : 🤍}
| setMessageData(messageData => | ||
| messageData.map(message => { | ||
| if (message.id === id) { | ||
| const button = document.querySelectorAll('button.like')[id-1] |
There was a problem hiding this comment.
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.
No description provided.