Erina P. - Kunzite #98
Conversation
| @@ -1,19 +1,45 @@ | |||
| import React from 'react'; | |||
| import './App.css'; | |||
| import chatMessages from './data/messages.json'; | |||
| import ChatLog from './components/ChatLog.js'; | |||
| import { useState } from 'react'; | |||
There was a problem hiding this comment.
Since we've already got a line that imports React, we want to avoid adding another line that duplicates it, so better to add to line 1:
import React, { useState } from 'react';| return { | ||
| ...entry, | ||
| liked: !entry.liked, | ||
| }; } else { |
There was a problem hiding this comment.
this else should be on a new line:
if(id === entry.id) {
return {
...entry,
liked: !entry.liked,
};
} else {
...
} | }); | ||
| } | ||
| const totalLikesTally = entries.reduce((total, entry) => { | ||
| if (entry.liked === true) { |
There was a problem hiding this comment.
It's ok to compare entry.liked to a boolean but it would be more common to just check for truthinees:
if (entry.liked) {| }); | ||
| }); | ||
| } | ||
| const totalLikesTally = entries.reduce((total, entry) => { |
| {/* Wave 01: Render one ChatEntry component | ||
| Wave 02: Render ChatLog component */} | ||
| <ChatLog | ||
| className='chat-log' |
There was a problem hiding this comment.
Small thing but these props should be indented two spaces to the right
| import ChatEntry from './ChatEntry.js'; | ||
|
|
||
| const ChatLog = (props) => { | ||
| const chatComponents = props.entries.map(entry => { |
There was a problem hiding this comment.
Learn showed this pattern of creating an array of React elements and then referencing it in a JSX expression, so it's definitely okay to do here, but I should just add that I have not found it to be common pattern in practice - most people would just return the array in the component's return statement, e.g.
return (
<div>
{props.entries.map(entry => (
<ChatEntry
key={entry.id}
id={entry.id}
sender={entry.sender}
body={entry.body}
liked={entry.liked}
timeStamp={entry.timeStamp}
updateLikedCount={props.updateLikedCount}
/>
)}
</div>
);
No description provided.