Sea Turtles/ Theresa Davis #100
Conversation
| return ( | ||
| <div id="App"> | ||
|
|
||
| console.log(chatMessages); |
There was a problem hiding this comment.
remove this console log after debugging
| function App () { | ||
|
|
||
| const [chatData, setChatData] = useState(chatMessages) | ||
| const updateChatData = updatedChat => { |
There was a problem hiding this comment.
this function looks good. You can remove the console log on line 15
| setChatData(chats); | ||
| }; | ||
|
|
||
| const calcTotalHearts = ()=>{ |
There was a problem hiding this comment.
great way to use existing data to calculate total likes. You could also use reduce like
return messageData.reduce((totalLikes, message) => {
// If messages.liked is true add 1 to totalLikes, else add 0
return (totalLikes += message.liked ? 1 : 0);
}, 0); // The 0 here sets the initial value of totalLikes to 0
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| ChatEntry.propTypes = { |
There was a problem hiding this comment.
you don't have any prop types. Your test should be looking for prop types for sender, body and timeStamp
|
|
||
| const ChatLog = (props) => { | ||
|
|
||
| const chatDataMap = props.chats.map(item =>( |
There was a problem hiding this comment.
using item.id as the key probably still gives you an error in Learn. You can get rid of this by using the index parameter for the map function like
const chatDataMap = props.chats.map((item, i) =>
<ChatEntry
key={i}| {/* Wave 01: Render one ChatEntry component | ||
| Wave 02: Render ChatLog component */} |
There was a problem hiding this comment.
| {/* Wave 01: Render one ChatEntry component | |
| Wave 02: Render ChatLog component */} |
| ); } | ||
|
|
||
| ChatLog.propTypes = { | ||
| chats:PropTypes.arrayOf(PropTypes.shape({ |
There was a problem hiding this comment.
great use of shape. Make sure to only had isRequired to props that are a must for the component to render. If you want them all to be required then you should update the tests to reflect that.
No description provided.