REACT_SUM1304

[valerij0412]

DEMO LINK

[mateacademy-ai-mentor]

Review Summary

Changes are needed before this solution can be accepted because one explicit checklist requirement is not followed. Functionally your Sum component and App render the correct sums with proper default values and a named export, which is well done. However, in src/components/Sum/Sum.jsx, the <p> inside the Sum component currently builds its text with multiple JSX expressions like Sum of {a} and {b} is {result}, which violates [CHECKLIST ITEM #2] Use string interpolation inside tag content. Similarly, in src/App.jsx, the <p> that displays the sum uses separate JSX interpolations instead of a single template literal. To fix this, replace the multiple interpolations with a single template literal expression wrapped in braces, for example: <p>{Sum of ${a} and ${b} is ${a + b}}</p> (or the same pattern using your existing result variable) so that the entire sentence is produced by one interpolated string. Once you align these paragraphs with the required interpolation style, the implementation will fully match both the functional and style requirements. As a minor workflow reminder, make sure you run npm test and use your Prettier/VS Code auto-format settings as described in the task instructions, even though those aspects cannot be directly verified here. Overall, your logic and component structure are solid; adjusting this small style detail will bring the solution completely in line with the expectations.

---

✨ 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: "2. [CODE STYLE] - Use string interpolation inside tag content"

The paragraph currently renders text using separate JSX expressions: Sum of {a} and {b} is {result}. Please use a template literal inside JSX as required, for example:

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

This keeps the content consistent with the provided Good example.

[mateacademy-ai-mentor]

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

currently uses multiple JSX expressions (Sum of {a} and {b} is {result}) instead of a single template literal expression inside braces (for example: {Sum of ${a} and ${b} is ${a + b}}). Consider replacing the content with a single interpolated string.

[mateacademy-ai-mentor]

Review Summary

I am requesting changes because there is a JSX syntax issue that prevents the component from compiling and also violates an explicit checklist requirement.

Critical issue that must be fixed:

• In src/components/Sum/Sum.jsx (around line 10), the <p> element contains an empty JSX expression followed by the template literal, roughly like <p>{}{Sum of ${a} and ${b} is ${result}}</p>, which is invalid JSX and breaks the build; it also goes against [CHECKLIST ITEM #2] Use string interpolation inside tag content.
• To fix this, remove the empty {} so the paragraph is rendered by a single interpolated string expression, for example: return <p>{Sum of ${a} and ${b} is ${result}}</p>;.

Minor finishing steps:

• After correcting that line, run npm test locally and ensure your code is formatted with your Prettier/VSCode settings as requested in the task instructions.

Your overall structure (named Sum export, defaulting a and b to 0, and the way App uses Sum) is solid, so once you apply this small JSX fix and re-run tests/formatting, your solution should be in great shape.

---

✨ 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

contains more than one JSX expression (an empty {} plus the template literal). Remove the empty {} so the content is a single interpolated string, e.g. <p>{Sum of ${a} and ${b} is ${result}}</p>.

[mateacademy-ai-mentor]

This line contains an empty JSX expression ({}), which is a syntax error and prevents the component from compiling. Remove the empty {} so the paragraph contains only the single interpolated string expression, e.g. {Sum of ${a} and ${b} is ${result}}. This also ensures compliance with the checklist item: "2. [CODE STYLE] - Use string interpolation inside tag content".

[mateacademy-ai-mentor]

Review Summary

Your solution is approved because the Sum component and App both meet the task requirements: Sum is a named export, uses default values for a and b, and renders the correct string with a single template literal, while App renders all five required Sum usages in the specified combinations, with short props kept on one line [CHECKLIST ITEM #1] and string interpolation used inside the JSX content [CHECKLIST ITEM #2]. Even though the core implementation looks solid, I am giving this as an educational approval so you can continue progressing while you practice the full workflow. The most important follow-up is to run npm test locally and verify all tests pass, then mention that result in your PR description so you build the habit of validating your code. Another critical habit is to ensure your files are formatted with the provided VSCode/Prettier settings before committing, so your code style stays consistent with the course and avoids style-related CI issues. As a minor improvement, double-check the project’s React task guidelines to confirm your file structure and component style match the recommended patterns, even though they already look good here. Overall, you’ve implemented the logic and JSX correctly; now focus on reinforcing testing and formatting habits so future submissions are production-ready.

---

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

Footnotes

1. Rate AI review example ↩