Solution#4342
Conversation
mateacademy-ai-mentor
left a comment
There was a problem hiding this comment.
Review Summary
I am requesting changes because there is still a violation of a required checklist item related to string interpolation in your JSX, which counts as a critical requirement for this task. Functionally, your Sum component and App behave correctly: Sum is a named export, default values for a and b are handled, and all required combinations are rendered with the correct sums. However, in src/components/Sum/Sum.jsx and src/App.jsx, the <p> content currently uses multiple JSX expressions like Sum of {a} and {b} is {a + b}, which violates the explicit requirement to use a single template literal inside tag content [CHECKLIST ITEM #2].
The fix is straightforward: wrap the entire sentence in one template string inside a single expression, for example:
<p>{`Sum of ${a} and ${b} is ${a + b}`}</p>Apply this same pattern wherever that sentence appears (both in Sum.jsx and in App.jsx if you duplicated the text), ensuring there is just one { ... } expression around the whole string. Once you make this change, your solution will meet both the functional and stylistic requirements for the task. Overall, you did a good job on the logic and component structure; this is a small but important style correction to fully comply with the checklist.
✨ Please rate this review in the Platform's notification center1. I will be grateful for your feedback! ✨
Important
Fix the issues, commit the changes, and then re-request my review using the Re-request review button2 in the Reviewers tab.
Tip
If you have any comments about this review, please leave a message in the Add a comment section below and mention me with the @mateacademy-ai-mentor tag3.
I will read your message during my next review of your pull request. Please do not reply directly to my comments, as that feature is not supported yet.
Caution
Do not close the pull request until the review is complete. Closing it early can lead to unexpected behavior and disrupt the review process.
Footnotes
| import React from 'react'; | ||
| import './App.scss'; | ||
| import { Sum } from './components/Sum/Sum'; | ||
|
|
There was a problem hiding this comment.
This violates checklist item #2: Use string interpolation inside tag content. Instead of concatenating plain text and expressions (Sum of {a} and {b} is {a + b}), wrap the whole sentence in a template string inside one expression, e.g. {Sum of ${a} and ${b} is ${a + b}}.
| export const Sum = ({ a = 0, b = 0 }) => { | ||
| return ( | ||
| <p> | ||
| Sum of {a} and {b} is {a + b} |
There was a problem hiding this comment.
This violates checklist item #2: "Use string interpolation inside tag content". Instead of separate expressions like Sum of {a} and {b} is {a + b}, wrap the whole sentence in a single template literal, e.g. {Sum of ${a} and ${b} is ${a + b}}.
mateacademy-ai-mentor
left a comment
There was a problem hiding this comment.
Review Summary
Your solution is approved because it meets all the functional and checklist requirements for this task. The Sum component is correctly implemented as a named export with default values a = 0 and b = 0 via props destructuring, so all required prop combinations behave correctly. The paragraph output uses a single template literal expression (e.g., Sum of ${a} and ${b} is ${a + b}) inside one JSX expression, which matches the specified format and satisfies [CHECKLIST ITEM #2]. In App.jsx, you correctly render all five required Sum instances: with both a and b, with negative and positive values, with only a, with only b, and with no props at all. Your JSX formatting also respects the style rule that tags with fewer than three short attributes stay on one line, aligning with [CHECKLIST ITEM #1]. Overall, the code is clear, concise, and functionally complete—nice work bringing everything in line with the requirements.
✨ Please rate this review in the Platform's notification center1. I will be grateful for your feedback! ✨
DEMO LINK