Implement Reac Sum Component

[tvk777]

• DEMO LINK

[mateacademy-ai-mentor]

Review Summary

Decision: REQUEST_CHANGES

Your app is functionally correct and well-structured, and App.jsx meets all requirements. However, there is one explicit checklist violation that needs to be fixed before approval.

Critical issue to fix (Checklist item #2):

• Location: src/components/Sum/Sum.jsx, the <p> content (around the line where you render the paragraph)
• What’s wrong: The paragraph text is built using multiple JSX text and expression nodes instead of a single template literal. The requirement states: use one string interpolation expression inside the paragraph.
• Why it matters: It’s an explicit checklist requirement; violating it can cause the review to fail even if functionality is correct.
• How to fix: Replace the mixed text/expressions with a single template literal, for example:
  • <p>{Sum of ${a} and ${b} is ${a + b}}</p>

Minor notes (no action required):

• Everything else looks clean: defaults, named export, and all five render cases in App.jsx are correct.

You’re very close—make this small interpolation change and you should be all set. Great work overall!

---

✨ 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: "Inside the paragraph, use a single string interpolation expression to build the text, e.g., {Sum of ${a} and ${b} is ${a + b}}, rather than concatenating multiple JSX text and expression nodes." Consider using a template literal for the entire paragraph content.

[mateacademy-ai-mentor]

Review Summary

Decision: REQUEST_CHANGES

Your implementation is very close, but there’s a critical blocker preventing approval.

Critical issue to fix (blocks requirements):

• Nested paragraph tags in src/components/Sum/Sum.jsx — likely around the render return (e.g., lines where you have <p> ... <p>Sum of {a} and {b} is {a + b}</p> ... </p>). This is invalid HTML and violates the explicit requirement: the output text must be exactly in the form Sum of X and Y is Z within a single paragraph node.
  • Why it’s wrong: HTML does not allow a <p> inside another <p>, and the task requires exactly one paragraph node.
  • How to fix: Remove the outer <p> and render only a single <p> that contains the sentence.

What’s good:

• Correct named export, prop destructuring with defaults for a and b, and proper string interpolation for the sentence. src/App.jsx includes all five required usages on single lines—nice work.

Once you update Sum.jsx to render a single <p> containing the sentence, this should fully meet the requirements. Keep it up!

---

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

There is a <p> tag inside another <p> tag. This is invalid HTML and violates the requirement to render the sentence inside a single paragraph node. Remove the outer <p> and keep only one <p> containing the sentence.

This violates the requirement: "The output text must be exactly in the form: 'Sum of X and Y is Z' within a single paragraph node."

[mateacademy-ai-mentor]

Review Summary

Great work! Your implementation fully meets the requirements:

• src/components/Sum/Sum.jsx: You exported Sum as a named export, used prop defaults (a = 0, b = 0), and rendered exactly one <p> with the sentence “Sum of {a} and {b} is {a + b}” using a single interpolation. This aligns with checklist items 1.2–1.5 and 2.2–3.2.
• src/App.jsx: You rendered five Sum usages (with a and b, with negatives, only a, only b, and none) each on a single line—clean and correct per the formatting guideline.

Educational approval: Everything looks correct, so this is a straightforward pass. Nicely done keeping the code concise and readable.

Minor suggestion (optional): Consider adding brief comments or simple prop type checks (e.g., using TypeScript or PropTypes) in future tasks to catch non-numeric inputs early.

Keep it up—this is a solid, well-structured submission!

---

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

Footnotes

1. Rate AI review example ↩