react_sum_solution

[Banderos14]

DEMO LINK

[mateacademy-ai-mentor]

Review Summary

I am requesting changes because one explicit checklist requirement is not satisfied: using string interpolation inside tag content [CHECKLIST ITEM #2]. Functionally, your Sum component works correctly (named export, default props, and all required usages in App are present), but the text rendering style needs to match the checklist.

The critical issue is in the paragraph content where you currently have text like Sum of {a} and {b} is {a + b}:

• In src/components/Sum/Sum.jsx, inside the Sum component’s <p> tag, replace the interleaved JSX expressions with a single template literal, e.g. <p>{Sum of ${a} and ${b} is ${a + b}}</p>.
• In src/App.jsx, wherever you render that same paragraph directly, use the same template-literal pattern inside {} instead of mixing plain text and {a}, {b}, {a + b}.
• In src/index.jsx, if you also render the sum paragraph there, update that <p> similarly so the entire sentence is built via one template string.

Once you switch all occurrences of the sum paragraph to a single template literal expression, your solution will both work correctly and fully comply with the checklist. Overall, you did well on the functional aspects of the task; this is a straightforward stylistic fix that will bring your submission fully in line with the requirements.

---

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

Review Summary

Your solution is approved because it correctly implements the required Sum component and all specified usages in App. The Sum component is a named export, uses default values for a and b when props are missing, and renders the sentence using a single template literal with string interpolation as required. In App.jsx, you render all five required cases (a=2,b=3, a=-5,b=5, a=10, b=5, and with no props), and the JSX tags with short props are kept on a single line, matching the style checklist. There are no functional or structural issues in the current code that would block task completion.

As minor next steps, make sure you have your formatter (Prettier or the provided VS Code settings) enabled so future tasks stay consistently formatted, and run npm test locally to confirm all tests pass. Also double-check that your GitHub Pages demo link (https://Banderos14.github.io/react_sum/) is live and working as expected. Nicely done on addressing the requirements cleanly and succinctly.

---

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

Footnotes

1. Rate AI review example ↩