Conversation
yangashley
left a comment
yangashley
left a comment
There was a problem hiding this comment.
Nice work practicing React! Let me know if you have any questions about the comments.
🟢 for react-chatlog
| import ChatLog from './components/ChatLog'; | ||
|
|
||
| const App = () => { | ||
| console.log(chatMessages); |
| const likedTrue = chatsMessages.filter((chat) => { | ||
| return chat.liked === true; | ||
| }); | ||
| return likedTrue.length; |
There was a problem hiding this comment.
I like this logic in a method so that you can invoke the method when line 30 renders
| sender: PropTypes.string.isRequired, | ||
| body: PropTypes.string.isRequired, | ||
| timeStamp: PropTypes.string.isRequired, | ||
| id: PropTypes.number.isRequired, | ||
| liked: PropTypes.bool.isRequired, | ||
| onChangeLike: PropTypes.func.isRequired, |
| }; | ||
|
|
||
| ChatLog.propTypes = { | ||
| chatsMessages: PropTypes.arrayOf(PropTypes.object).isRequired, |
There was a problem hiding this comment.
Since we know the shape of the object that is in the array, we should explicitly validate the shape of the object here for an added layer of validation to prevent your protect your program from errors.
Also note that you have .isRequired on arrayOf() but you'll also. need to have .isRequired on the elements inside arrayOf()
ChatLog.propTypes = {
chatsMessages: PropTypes.arrayOf(PropTypes.shape({
id: PropTypes.number.isRequired,
sender: PropTypes.string.isRequired,
body: PropTypes.string.isRequired,
timeStamp: PropTypes.string.isRequired,
liked: PropTypes.bool
})).isRequired,
onChangeLike: PropTypes.func.isRequired
};| }; | ||
|
|
||
| return ( | ||
| <div className="chat-entry local"> |
There was a problem hiding this comment.
Here we have the class chat-entry local hardcoded to this div so when I start up your react app, all the dialogue bubbles are on the left side. We need a way to dynamically change the class between chat-entry local and chat-entry remote.
How would you use a variable to reference the different classes depending on if the ChatEntry belongs to Vladimir or Estragon?
Consider checking to see if the value of sender is 'Vladimir', if it is then the value of the class should be chat-entry local otherwise it should be chat-entry remote. How would you use a ternary to do this?
| return chat; | ||
| } | ||
| return chat; |
There was a problem hiding this comment.
Since you have return chat; inside and outside the if statement, but you need to return chat in both cases, you can delete line 13 and let line 15 do the returning (which will happen regardless of whether line 12 executes or not
2 participants
No description provided.