Conversation
goeunpark
left a comment
goeunpark
left a comment
There was a problem hiding this comment.
Wonderful work, Jodi! 🎉
Your tests pass, your props cascade down beautifully, and your App-level state is managed delightfully! This code is so clean and well-thought out; it is a well-deserved Green. 🟢
Keep it up! 🚀
| import './App.css'; | ||
| import chatMessages from './data/messages.json'; | ||
| import ChatLog from './components/ChatLog'; | ||
| import { useState } from 'react'; |
There was a problem hiding this comment.
We can combine L1 and L4 into one line because they're both imported from the react library:
import React, { useState } from 'react';
| const [entries, setEntries] = useState(chatMessages); | ||
| const [likes, setLikes] = useState(0); |
There was a problem hiding this comment.
So organized, setting all the state variables at the top of the component! Love to see it 💖
| setEntries(newEntries); | ||
| setLikes(currentLikes); |
| }; | ||
|
|
||
| ChatLog.propTypes = { | ||
| entries: PropTypes.array.isRequired, |
There was a problem hiding this comment.
We should also add toggleHeartCallback as a required prop type.
| ); | ||
| }); | ||
|
|
||
| return <ul>{chatComponents}</ul>; |
There was a problem hiding this comment.
Love that you used semantic HTML with <ul> and <li> here!
| const ChatEntry = (props) => { | ||
| const toggleHeart = () => { | ||
| props.toggleHeartCallback(props.id); | ||
| }; |
There was a problem hiding this comment.
Small nit, a space after this life would help with readability!
2 participants
Otters - Jodi Denney