Develop

[timurradkevic]

• DEMO LINK

[mateacademy-ai-mentor]

Review Summary

Changes are needed before this solution can be accepted, but they are limited to a small code‑style issue. Functionally, your Sum component and App component behave correctly: a and b default to 0, the paragraph shows the correct values, and App renders all the required Sum usages.

The issue is with [CHECKLIST ITEM #2] “Use string interpolation inside tag content”: in src/components/Sum/Sum.jsx, the <p> inside the Sum component currently renders something like Sum of {a} and {b} is {a + b}, which uses multiple JSX expressions instead of a single template string. This same pattern appears in the paragraph in src/App.jsx where you render the sum text. To fix this, replace the paragraph content in both places with a single template literal expression, for example: <p>{Sum of ${a} and ${b} is ${a + b}}</p>. Once you update the JSX to use string interpolation consistently and ensure tests (if any) still pass, the solution will be ready to accept. Overall, you did well on the functional parts of the task; this is just about aligning with the required coding style.

---

✨ 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 violates checklist item #2: "Use string interpolation inside tag content". Your code uses separate JSX expressions (Sum of {a} and {b} is {a + b}), which matches the BAD EXAMPLE in the checklist. Consider replacing the content with a template literal inside the tag, for example: {Sum of ${a} and ${b} is ${a + b}}.

[mateacademy-ai-mentor]

This violates checklist item #2: "2. [CODE STYLE] - Use string interpolation inside tag content"

The paragraph currently renders the pieces as Sum of {a} and {b} is {a + b}. Replace it with a template string, for example:

<p>{`Sum of ${a} and ${b} is ${a + b}`}</p>

This matches the required code style.

[mateacademy-ai-mentor]

Review Summary

Your solution is approved because it fully meets the functional and code-style requirements of the task. The Sum component (in src/components/Sum/Sum.jsx) is a named export, uses default values a = 0 and b = 0, and renders the required text inside a <p> tag using a single template literal, satisfying [CHECKLIST ITEM #2]. In src/App.jsx, you render all five required Sum usages (with a=2, b=3, a=-5, b=5, a=10, b=5, and no props) and keep the JSX for these short prop lists on a single line, which matches [CHECKLIST ITEM #1]. There are no critical or blocking issues with functionality or requirements compliance. As minor follow-ups, make sure you run npm test locally to catch any hidden test failures and ensure your editor/Prettier is configured for format-on-save. Nice work implementing the requirements cleanly and consistently.

---

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

Footnotes

1. Rate AI review example ↩