creating a Sum component#3930
Conversation
mateacademy-ai-mentor
left a comment
mateacademy-ai-mentor
left a comment
There was a problem hiding this comment.
Review Summary
I’m requesting changes because there are critical checklist violations that will block passing the task. In src/App.jsx lines 7–20, the <Sum> usages are written as multi-line short tags and include invalid spacing like < Sum ...>; this breaks JSX parsing and violates [CHECKLIST ITEM #1]. Please collapse each of those to single-line short tags and remove the extra space after <, e.g., <Sum a={2} b={3} />.
Additionally, in src/components/Sum/Sum.jsx line 2, the paragraph content is built from multiple JSX pieces (Sum of { a } and { b } is { a + b }), which violates [CHECKLIST ITEM #2]. Update it to use a template string inside the tag content: <p>{Sum of ${a} and ${b} is ${a + b}}</p> to meet the requirement and preserve output.
Functionally, your component logic and required usages are correct—nice work on defaults, named export, and the five cases. After these fixes, the build/tests should pass and the checklist will be satisfied.
✨ 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
| < Sum | ||
| a = { 2 } | ||
| b = { 3 } | ||
| /> | ||
| < Sum | ||
| a = { -5 } | ||
| b = { 5 } | ||
| /> | ||
| < Sum | ||
| a = { 10 } | ||
| /> | ||
| < Sum | ||
| b = { 5 } | ||
| /> |
There was a problem hiding this comment.
This violates checklist item #1: "If you have < 3 attribues on a tag and the values are short
write the tag in one line (to make it easier to write and read)."
Examples in this file that should be one-line: the multi-line <Sum> usages between lines 7 and 20. Please rewrite them as single-line short tags, e.g. <Sum a={2} b={3} /> <Sum a={-5} b={5} /> <Sum a={10} /> <Sum b={5} /> (preserve spacing/formatting preferences from your project).
| @@ -1 +1,3 @@ | |||
| // export const Sum = () => (); | |||
| export const Sum = ({ a = 0, b = 0 }) => ( | |||
| <p>Sum of { a } and { b } is { a + b }</p> | |||
There was a problem hiding this comment.
This violates checklist item #2: "Use string interpolation inside tag content"
The component currently renders the sentence as plain JSX pieces: Sum of { a } and { b } is { a + b } on line 2. The checklist requires using a template string inside tag content. Consider changing the paragraph to use a template literal, for example:
<p>{`Sum of ${a} and ${b} is ${a + b}`}</p>This will satisfy the checklist while preserving the exact required output format.
mateacademy-ai-mentor
left a comment
mateacademy-ai-mentor
left a comment
There was a problem hiding this comment.
Sorry, the pull request review was unsuccessful for the following reasons:
Warning
No changes were made in the pull request since the last review. Please make sure that you have added files to the pull request and committed the changes.
[CODE: NCM]
If the issue is within your control, please address it.
The next review attempt will automatically launch in about 1 hour.
If you believe this is an error or need assistance, please contact the support team.
mateacademy-ai-mentor
left a comment
mateacademy-ai-mentor
left a comment
There was a problem hiding this comment.
Review Summary
Decision: APPROVE
Your implementation meets the core requirements. The Sum component uses a named export, defaults a and b to 0, and renders exactly one paragraph with the correct interpolated text. In App.jsx, you render the five required cases (including missing props and individual a/b cases) using clean, single-line JSX.
No critical blockers found. As a minor improvement, consider adding PropTypes or TypeScript types to document prop expectations and help catch unintended types during development. Please run npm test locally to confirm all tests pass and ensure your PR includes the required demo link (GitHub Pages URL) in the description.
Great job keeping the code concise and aligned with the checklist.
✨ Please rate this review in the Platform's notification center1. I will be grateful for your feedback! ✨
Footnotes
2 participants
https://taniafedortsi.github.io/react_sum/