Chatlog G Quinn--Kunzite #112
Conversation
| }; | ||
|
|
||
| const likedMessagesCount = messages.reduce( | ||
| (count, message) => (message.liked ? count + 1 : count), |
| const [messages, setMessages] = useState(chatMessages); | ||
|
|
||
| const handleLike = (id) => { | ||
| const updatedMessages = messages.map((message) => { |
There was a problem hiding this comment.
This works great in this case though I'd recommend using a callback with the update function because it will give you access to the most current previous state, which will ensure you're updating the correct value(s). To use that approach, pass a callback to the update function instead of a value. React will invoke that callback with an argument that represents the most recent state. Then you can use that in whatever computation you need and return the new value you want to set. e.g.
const handleLike = (id) => {
setMessages((previousMessages) => {
return previousMessages.map((message) => {
if (message.id === id) {
return {
...message,
liked: !message.liked,
}
}
});
});
};| import TimeStamp from './components/TimeStamp'; | ||
| import ChatEntry from './components/ChatEntry'; |
There was a problem hiding this comment.
Neither of these components need to be imported. You should only import components you're directly using. While Chatlog uses ChatEntry and ChatEntry uses TimeStamp, they only need to be imported in the files in which the actual component is being used.
There was a problem hiding this comment.
Good job with this project! Overall well done! Specific comments below, but I'd just add a note that most JavaScript projects will use 2 spaces and I'm seeing mixes 2 and 4 spaces in different files. It's important to be consistent there. Also, it's a good idea to ensure your punctuation syntax follows conventions (i.e. aligning curly braces and parentheses, spacing around punctuation and variables, etc).
| //Fill with correct proptypes | ||
| sender: PropTypes.string.isRequired, | ||
| body: PropTypes.string.isRequired, | ||
| timestamp: PropTypes.element.isRequired, |
There was a problem hiding this comment.
A couple things to note about timestamp. First, you're passing a prop to this component called timeStamp, but this definition is for timestamp, these are different names. Second, PropTypes.element means that the type of value is a React element; however, if you meant for this to be timeStamp, then I think you're passing that prop as a string, so the type should be updated accordingly.
| PropTypes.shape({ | ||
| sender: PropTypes.string.isRequired, | ||
| body: PropTypes.string.isRequired, | ||
| TimeStamp: PropTypes.string.isRequired, |
There was a problem hiding this comment.
You're getting a warning in the developer tools console for this, TimeStamp isn't defined. I believe the prop you're passing is called timeStamp.
No description provided.