chatlog, am I talking to myself? #95
Conversation
kelsey-steven-ada
left a comment
kelsey-steven-ada
left a comment
There was a problem hiding this comment.
Great work on your first solo React project! Really nice code organization overall ^_^ I've left some questions & comments below, please take a look when you have time and reach out here or on Slack if there's anything I can clarify.
| const countLikes = () => { | ||
| let heartCount = 0; | ||
| for (let message of messages) { | ||
| if (message.liked) { | ||
| heartCount += 1; | ||
| } | ||
| }return heartCount; | ||
| }; |
There was a problem hiding this comment.
Great use of the chat data to calculate the total hearts! Another way we could do this is with the Array.reduce function:
let initialValue = 0;
return messages.reduce((total, message) => {
return (chat.liked === true) ? total + 1 : total;
}, initialValue);| <div id="App"> | ||
| <header> | ||
| <h1>Application title</h1> | ||
| <h1>Waiting for Chat GDT</h1> |
| const localOrRemote = (sender) => { | ||
| if (sender === 'Vladimir') { | ||
| return 'chat-entry local'; | ||
| } else if (sender === 'Estragon') { | ||
| return 'chat-entry remote'; | ||
| }; | ||
| }; |
There was a problem hiding this comment.
Small style note: the indentation got a little messed up here, this is something we might add to a checklist of things to review our code for before opening PRs.
| const localOrRemote = (sender) => { | ||
| if (sender === 'Vladimir') { | ||
| return 'chat-entry local'; | ||
| } else if (sender === 'Estragon') { | ||
| return 'chat-entry remote'; | ||
| }; | ||
| }; | ||
| return ( | ||
| <div className="chat-entry local"> | ||
| <h2 className="entry-name">Replace with name of sender</h2> | ||
| <div className= {localOrRemote(sender)}> |
There was a problem hiding this comment.
We could simplify this a little and remove the duplication of the chat-entry class name if we use an interpolated string for the class on line 19:
const localOrRemote = (sender) => {
return (sender === 'Vladimir') ? 'local' : 'remote';
};
return (
{`chat-entry ${chatLocal}`}
<div className= {`chat-entry ${localOrRemote(sender)}`}>
...|
|
||
| Chatlog.propTypes = { | ||
| entries: PropTypes.arrayOf ( | ||
| PropTypes.shape ( |
There was a problem hiding this comment.
Nice use of PropTypes.shape for more detail on what data is expected for this component =]
2 participants
No description provided.