Solution

[Denixify]

DEMO LINK

[mateacademy-ai-mentor]

Review Summary

I am requesting changes because the App component is not yet using the Sum component in the way the task requires, which will cause the tests to fail. In src/App.jsx, the lines where you currently render hard-coded paragraphs like <p>Sum of 2 and 3 is 5</p> bypass the Sum component instead of delegating the calculation to it, which violates the requirement that the results come from Sum. To fix this, remove those hard-coded <p> elements and render five Sum components instead: one with a = 2 and b = 3, one with a = -5 and b = 5, one with only a = 10, one with only b = 5, and one with no props at all (this ensures the default values are used). Make sure each of these usages is written as a one-line JSX tag when it has just a couple of props, in line with the formatting checklist (e.g., <Sum a={2} b={3} />). Your Sum component implementation in src/components/Sum/Sum.jsx is already correct: it uses a named export, provides default values, and uses string interpolation inside the JSX content, so no changes are needed there. After updating App.jsx, run npm test to confirm that all tests pass and the app renders the five required Sum outputs. Once you wire App to use Sum correctly, your solution will fully meet the task requirements—nice work so far on the Sum component itself.

---

✨ Please rate this review in the Platform's notification center¹. 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 button² 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 tag³.
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

1. Rate AI review example ↩

2. Re-request AI review example ↩

3. Add AI review comments example ↩

[mateacademy-ai-mentor]

This file doesn't render the required Sum components from the task description. The description states: "The App should contain the next Sum components: - a = 2 and b = 3; - a = -5 and b = 5; - just a = 10; - just b = 5; - no params at all." Currently App.jsx contains hard-coded

elements with the sums and only a single with no props. Replace the paragraph lines with the five Sum usages (examples: , , , , ) and keep tags one-line per checklist item #1.

[mateacademy-ai-mentor]

Review Summary

Your solution is approved because it meets all the functional and checklist requirements for this task. The Sum component is a named export, correctly provides default values for a and b, and uses JSX string interpolation to render text like Sum of 2 and 3 is 5. In src/App.jsx, you render the five required <Sum /> usages (with a=2, b=3, a=-5, b=5, a=10 only, b=5 only, and with no props) as one-line JSX tags, delegating both the calculation and paragraph content to Sum instead of hard-coding <p> elements. There are no critical issues that break functionality or violate the core task requirements. As minor follow-ups, ensure you have Prettier and the recommended VSCode settings enabled and run npm test locally to verify everything passes on your machine. Nicely done keeping the components small, clear, and aligned with the task’s composition guidelines.

---

✨ Please rate this review in the Platform's notification center¹. I will be grateful for your feedback! ✨

Footnotes

1. Rate AI review example ↩