Skip to content

Conversation

@sanzcrpt
Copy link

No description provided.

Copy link

@tgoslee tgoslee left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great job San! Left a few comments. Let me know if you have questions.

const App = () => {
const [chatMessagesData, setChatData] = useState(chatMessages);

const updateChatData = (updatedMessage) => {
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

looks good!

};


const countLikes = (messages) => {
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is a great way to use existing data. You could also use the reduce function

    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

<header>
<h1>Application title</h1>
<h1>A tale of two cities</h1>
<section><span id="heartWidget" className="widget"> {likes} 💚s</span></section>
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You could just call your function in jsx like {countLikes(chatMessageData} and in Learn you were getting an error message because of the style of heart you are using. You can alter the tests to accept the heart you want to use.

props.onUpdate(updatedMessage);
}

const likeButton = props.liked ? '💚' : '🤍';
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nice use of ternary operator here. Your test are currently looking for ❤️. If you don't want to use that update your tests to reflect that.


ChatLog.propTypes = {
entries: PropTypes.arrayOf(
PropTypes.shape({
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

great way to specific about what the objects content should be.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants