Solution

[OlehYuriev]

DEMO LINK

[mateacademy-ai-mentor]

Review Summary

I am requesting changes because there are still a couple of requirement-level issues with how the Sum component is used and rendered.
In src/App.jsx, where you render the five <Sum> components (around lines 10–20), the last three cases currently pass explicit zeros like <Sum a={10} b={0} />, <Sum a={0} b={5} />, and <Sum a={0} b={0} />, but the task explicitly requires “just a = 10”, “just b = 5”, and “no params at all”, so these props need to be omitted.
To fix this, change those usages to exactly <Sum a={10} />, <Sum b={5} />, and <Sum />, so that the component relies on its default values as the tests and specification expect.
In src/components/Sum/Sum.jsx (around the return statement, e.g., lines 5–10), the paragraph currently renders as Sum of {a} and {b} is {sum}, which does not follow the required [CHECKLIST ITEM #2] "use string interpolation inside tag content".
Update this to use a template literal inside JSX, for example return <p>{Sum of ${a} and ${b} is ${a + b}}</p>;, so the entire sentence is generated from one interpolated string.
Once you make these adjustments, your implementation will both satisfy the functional requirements for the different Sum usages and align with the checklist’s code-style expectations.
The rest of your setup (named export and default parameter values) looks solid, so you are very close to a fully correct solution.

---

✨ 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 the task requirement: "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." Here you passed explicit zeros instead of omitting props. Change these three usages so they are: , , and respectively so the cases "just a", "just b" and "no params" are present.

[mateacademy-ai-mentor]

This violates checklist item #2: "[CODE STYLE] - Use string interpolation inside tag content". Instead of writing the paragraph as plain JSX expressions (Sum of {a} and {b} is {sum}), use a template literal inside the tag, for example:

{Sum of ${a} and ${b} is ${a + b}}

. Consider keeping the tag on one line since the content is short.

[mateacademy-ai-mentor]

This violates checklist item #2: "Use string interpolation inside tag content". The JSX currently uses separate expressions (Sum of {a} and {b} is {sum}). Use a template literal inside JSX instead, e.g. <p>{Sum of ${a} and ${b} is ${a + b}}</p>.

[mateacademy-ai-mentor]

This does not match the task requirement: 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. Here you passed <Sum a={10} b={0} /> — instead pass only a (use <Sum a={10} />).

[mateacademy-ai-mentor]

Review Summary

Your solution is approved because it fully meets the functional and checklist requirements for the Sum component task. The Sum component correctly uses a named export, provides default values of 0 for both a and b, and renders the paragraph using a single template literal in JSX (e.g., Sum of ${a} and ${b} is ${a + b}), satisfying [CHECKLIST ITEM #2]. In App.jsx, you render all five required usages of <Sum> with the specified prop combinations on single lines, which aligns with [CHECKLIST ITEM #1] and ensures the behavior is correct for all tested inputs. There are no critical issues or blockers; the remaining suggestions are environmental, such as running npm test locally and ensuring Prettier/format-on-save is enabled in your editor so future tasks stay consistently formatted. Nice work implementing the requirements precisely and keeping the code clean and readable.

---

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

Footnotes

1. Rate AI review example ↩