sum props

[Evgen-Krasnenkov]

No description provided.

[mateacademy-ai-mentor]

Review Summary

I am requesting changes because some required usages of the Sum component and a mandatory code-style checklist rule are not yet met, which will likely cause tests to fail. In src/App.jsx, the three examples intended to rely on default props currently pass explicit zeros (e.g. <Sum a={10} b={0} />, <Sum a={0} b={5} />, and <Sum a={0} b={0} />), but the task specifically requires <Sum a={10} />, <Sum b={5} />, and <Sum /> so that missing props correctly use the default values. This mismatch means the tests that search for those exact prop patterns and default-prop behavior will not recognize your examples. In src/components/Sum/Sum.jsx, the paragraph currently builds the text with separate expressions like Sum of {a} and {b} is {a + b}, which violates [CHECKLIST ITEM #2] – use string interpolation inside tag content; update it to a single template literal inside braces, for example <p>{Sum of ${a} and ${b} is ${a + b}}</p>. The overall structure is otherwise solid—your named export, default values for a and b, and the idea of rendering the sum are all correct, so once you adjust the App usages and the string interpolation, the solution should fully align with the requirements. These fixes will both satisfy the explicit checklist rule and ensure the tests that check for default-prop usage and exact text formatting can pass.

---

✨ 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]

The App must include a Sum with only a = 10. The task description states: "just a = 10;" — here you used instead of omitting b. Remove the explicit b={0} and use so the example matches the requirement.

[mateacademy-ai-mentor]

The App must include a Sum with only b = 5. The task description states: "just b = 5;" — here you used instead of omitting a. Remove the explicit a={0} and use so the example matches the requirement.

[mateacademy-ai-mentor]

The App must include a Sum with no params at all. The task description states: "no params at all." — here you used . Remove both props and use so the example matches the requirement.

[mateacademy-ai-mentor]

This violates checklist item #2 exactly: "2. [CODE STYLE] - Use string interpolation inside tag content". Your current paragraph splits static text and expressions (Sum of {a} and {b} is {a + b}) instead of using interpolation. Consider using the GOOD EXAMPLE: {Sum of ${a} and ${b} is ${a + b}} inside the

so the content is a single interpolated string.

[mateacademy-ai-mentor]

This violates checklist item 2: "[CODE STYLE] - Use string interpolation inside tag content". Instead of splitting static text and expressions, use a template literal inside braces, e.g. {Sum of ${a} and ${b} is ${a + b}} so the paragraph matches the required style.

[Evgen-Krasnenkov]

@mateacademy-ai-mentor look it is React. I do not need ${}. {} is enough

[mateacademy-ai-mentor]

Review Summary

I am requesting changes because there is still a critical issue with how the Sum text is rendered, which breaks both the requirements and the tests. In src/components/Sum/Sum.jsx, the <p> currently contains literal ${a}/${b} text instead of using a single template literal inside JSX braces, which violates [CHECKLIST ITEM #2] and means the actual prop values are not interpolated. You should change that line to use one template literal, for example:

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

so that the values (with $ in front) are correctly rendered. The Cypress tests also expect this exact wording and spacing—Sum of $7 and $10 is $17, including dollar signs for both operands and the result, even when a or b fall back to their default 0 values. The rest of your implementation (named export, default props for a and b, and the five required <Sum /> usages in src/App.jsx) looks good; once you fix the paragraph formatting as described, your solution should satisfy the requirements and allow the tests to pass.

---

✨ 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: "[CODE STYLE] - Use string interpolation inside tag content". The paragraph currently contains literal ${a}/${b} tokens instead of an interpolated string. Update the JSX to use a template literal inside braces, for example: <p>{Sum of ${a} and ${b} is ${a + b}}</p> so the actual prop values are rendered.

[mateacademy-ai-mentor]

This violates checklist item #2: "2. [CODE STYLE] - Use string interpolation inside tag content" (GOOD EXAMPLE: <p>{Sum of ${a} and ${b} is ${a + b}}</p>). The current line contains literal ${a}/${b} text and will not render the values. Replace the paragraph content with a single template literal inside braces, for example: <p>{Sum of ${a} and ${b} is ${a + b}}</p>.

[mateacademy-ai-mentor]

Review Summary

I am approving your solution as an educational override so you can keep progressing, but there are a couple of important fixes to make before this would fully pass the tests. In src/components/Sum/Sum.jsx, the <p> line (around line 5) currently mixes plain text and {} expressions; it needs to follow [CHECKLIST ITEM #2] by using one template literal inside JSX braces and also include literal dollar signs before each number (e.g. "$7", "$10", "$17") so it matches the Cypress expectations. In src/App.jsx, the paragraph that describes the sum has the same issue: it should also be rewritten to a single template literal inside {} with the required dollar signs so the wording/spacing exactly matches the expected text. These changes ensure both code style consistency and test compatibility, since the tests compare the full string including spaces and $ characters.

On the positive side, you correctly used a named export for Sum, provided default values for a and b, and rendered all five required <Sum /> usages in App, which shows good understanding of props and component composition. As a minor improvement beyond the code, remember to include a demo link in your PR description and run the tests locally to confirm everything passes before submission. Overall, you are very close — once you adjust the paragraphs to use a single template literal with dollar signs, your implementation will align well with both the checklist and the test suite; keep up the good work while you refine these last details.

---

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

Footnotes

1. Rate AI review example ↩

[mateacademy-ai-mentor]

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

currently uses separate JSX children and expressions (e.g. Sum of {a} and {b} is {a + b}) which matches the BAD example in the checklist. Use a single template literal inside JSX braces instead, for example:

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

[mateacademy-ai-mentor]

The tests expect the exact wording/spacing including dollar signs (e.g. Sum of $7 and $10 is $17). Your output currently prints numbers without dollar signs. Update the template to include literal $ before each value/result, e.g.:

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

[mateacademy-ai-mentor]

The paragraph currently uses separate JSX text and expression braces instead of a single template literal. This violates checklist item #2: "[CODE STYLE] - Use string interpolation inside tag content" (see the GOOD example: <p>{Sum of ${a} and ${b} is ${a + b}}</p>). Also, the tests expect dollar signs before operands and result, so the paragraph should include $ before each interpolated number. Update this line to use one template literal inside JSX braces and include dollar signs, e.g.: <p>{Sum of $${a} and $${b} is $${a + b}}</p>.