Conversation
mikellewade
left a comment
mikellewade
left a comment
There was a problem hiding this comment.
Malik, great work on your React Chatlog! ⭐️
| function toggleLike(id) { | ||
| const updatedEntries = entries.map(entry => { | ||
| if (entry.id === id) { | ||
| return { ...entry, liked: !entry.liked } | ||
| } | ||
| return entry; | ||
| }); | ||
| setEntries(updatedEntries); | ||
| }; |
There was a problem hiding this comment.
Nice work on using .map to map over your entries! Very functional! Since you are using a simple conditional block here, we could make this more succinct by using a ternary instead like so:
const toggleLike = (id) =>
setEntries(entries.map(entry =>
entry.id === id ? { ...entry, liked: !entry.liked } : entry
));When you find yourself with simple checks like these, more often than not a ternary could be implemented instead for conciseness but still maintaining some kind of readability.
| setEntries(updatedEntries); | ||
| }; | ||
|
|
||
| const totalLikes = entries.filter(entry => entry.liked).length; |
There was a problem hiding this comment.
You could also do this with the reduce method like so:
const totalLikes = chatMessages.reduce((count, message) => count + (message.liked ? 1 : 0), 0);| <header> | ||
| <h1>Application title</h1> | ||
| <h1>Chat Between Vladimir and Estragon</h1> | ||
| <h3>{totalLikes} ❤️s</h3> |
| <main> | ||
| {/* Wave 01: Render one ChatEntry component | ||
| Wave 02: Render ChatLog component */} | ||
| <ChatLog entries={entries} onToggleLike={toggleLike} /> |
There was a problem hiding this comment.
🫡
You may see conventions where you put the props for a component on separate lines like so:
<ChatLog
entries={entries}
onToggleLike={toggleLike}
/>This is one way to make components with many props more readable!
| import propTypes from 'prop-types'; | ||
|
|
||
| const ChatEntry = () => { | ||
| const ChatEntry = ({ id, sender, body, timeStamp, liked, onToggleLike }) => { |
There was a problem hiding this comment.
Nice work de-structuring your props! ⭐️
| const localOrRemote = sender === 'Vladimir' ? 'chat-entry local' : 'chat-entry remote'; | ||
|
|
||
| return ( | ||
| <div className="chat-entry local"> | ||
| <h2 className="entry-name">Replace with name of sender</h2> | ||
| <div className={localOrRemote}> |
| }; | ||
|
|
||
| export default ChatLog; No newline at end of file |
There was a problem hiding this comment.
You didn’t include prop types for this component. While PropTypes is deprecated in React v19, it's still important to ensure consistent type safety across your application. Recall that React encourages you to adopt a type system like TypeScript to prevent type-related bugs and improve code reliability. @malikelmessiry
| sender: propTypes.string.isRequired, | ||
| body: propTypes.string.isRequired, | ||
| timeStamp: propTypes.string.isRequired, | ||
| liked: propTypes.bool.isRequired, | ||
| onToggleLike: propTypes.func |
There was a problem hiding this comment.
⭐️
| sender: propTypes.string.isRequired, | |
| body: propTypes.string.isRequired, | |
| timeStamp: propTypes.string.isRequired, | |
| liked: propTypes.bool.isRequired, | |
| onToggleLike: propTypes.func | |
| sender: propTypes.string.isRequired, | |
| body: propTypes.string.isRequired, | |
| timeStamp: propTypes.string.isRequired, | |
| liked: propTypes.bool.isRequired, | |
| onToggleLike: propTypes.func.isRequired |
| <h2 className="entry-name">{sender}</h2> | ||
| <section className="entry-bubble"> | ||
| <p>Replace with body of ChatEntry</p> | ||
| <p className="entry-time">Replace with TimeStamp component</p> | ||
| <button className="like">🤍</button> | ||
| <p>{body}</p> | ||
| <p className="entry-time"> | ||
| <TimeStamp time={timeStamp} /> |
There was a problem hiding this comment.
Great job on interpolating your JS (props) into your JSX object return body and leveraging your TimeStamp component!
| <p className="entry-time"> | ||
| <TimeStamp time={timeStamp} /> | ||
| </p> | ||
| <button className="like" onClick={() => onToggleLike(id)}>{liked ? '❤️' : '🤍'}</button> |
2 participants
No description provided.