task solution by Vinicchii · Pull Request #4208 · mate-academy/react_sum

Vinicchii · 2026-04-17T05:21:54Z

mateacademy-ai-mentor

Review Summary

I am requesting changes because several core task requirements are not yet satisfied and they are causing both linter and test failures.

Critical issues that must be fixed:

In src/components/Sum/Sum.jsx, the component is exported as a default (export default Sum;) but the task and tests require a named export; change this to something like export const Sum = ({ a = 0, b = 0 } = {}) => { ... } and remove or adjust the default export, then import it with import { Sum } from './components/Sum/Sum'; in src/App.jsx (around the top import lines).
In Sum.jsx, the  currently renders literal ${a}, ${b}, etc., and also uses and instead of the exact required format; update it to use JSX interpolation with a template literal as required by [CHECKLIST ITEM #2], for example: {Sum of $${a} + $${b} is $${a + b}} so the Cypress expectations like 'Sum of $2 + $3 is $5' are met.
In src/App.jsx, the three demo usages currently simulate "missing" props by passing 0 explicitly (e.g. a={10} b={0}, a={0} b={5}, a={0} b={0}), but the task requires omitting those props altogether; change them to exactly <Sum a={10} />, <Sum b={5} />, and <Sum />.

Once you expose Sum as a named export, use the correct template literal inside JSX, and adjust the App.jsx imports and component usages, the tests and checklist requirements should be satisfied. You already have a good start with the default values and overall component structure, so focus on these format and export/import details to complete the task successfully.

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

mateacademy-ai-mentor · 2026-04-17T05:24:20Z

@@ -1,14 +1,13 @@
 import React from 'react';
 import './App.scss';
+import Sum from '../src/components/Sum/Sum';


This doesn't use string interpolation inside tag content — it renders literal ${a} and ${b} instead of a template literal. This violates checklist item #2: "2. [CODE STYLE] - Use string interpolation inside tag content". Use a template literal inside braces, for example: {Sum of ${a} and ${b} is ${a + b}}.

mateacademy-ai-mentor · 2026-04-17T05:24:20Z

-    <p>Sum of 0 and 0 is 0</p>
-    {/* Replace paragraphs with Sum componets */}
-    {/* And remove commented lines :) */}
+    <Sum a={2} b={3} />


The task requires a named export for Sum (not default). Replace export default Sum; with a named export, for example: export const Sum = ({ a = 0, b = 0 } = {}) => (...) or export the named identifier: export { Sum };.

mateacademy-ai-mentor · 2026-04-17T05:24:20Z

@@ -1,14 +1,13 @@
 import React from 'react';
 import './App.scss';
+import Sum from '../src/components/Sum/Sum';


You're importing Sum as a default export. After changing Sum to a named export, import it with braces, e.g. import { Sum } from './components/Sum/Sum';. Also adjust the relative path from ../src/components/... to ./components/... when importing from src/App.jsx.

mateacademy-ai-mentor · 2026-04-17T05:24:21Z

-    {/* And remove commented lines :) */}
+    <Sum a={2} b={3} />
+    <Sum a={-5} b={5} />
+    <Sum a={10} b={0} />


This line currently uses b={0} to simulate a missing prop. The task requires a Sum with just a = 10 (no b prop). Change this to <Sum a={10} />.

mateacademy-ai-mentor · 2026-04-17T05:24:21Z

+    <Sum a={2} b={3} />
+    <Sum a={-5} b={5} />
+    <Sum a={10} b={0} />
+    <Sum a={0} b={5} />


This line currently uses a={0} to simulate a missing prop. The task requires a Sum with just b = 5 (no a prop). Change this to <Sum b={5} />.

mateacademy-ai-mentor · 2026-04-17T05:24:21Z

+    <Sum a={-5} b={5} />
+    <Sum a={10} b={0} />
+    <Sum a={0} b={5} />
+    <Sum a={0} b={0} />


This line passes a={0} b={0} but the task requires one Sum with no parameters at all. Change this to <Sum />.

mateacademy-ai-mentor · 2026-04-17T05:24:21Z

-// export const Sum = () => ();
+const Sum = ({ a = 0, b = 0 } = {}) => (
+  <p>
+    Sum of ${a} + ${b} is ${a + b}


This imports Sum as a default export (import Sum ...), but the task requires a named export for Sum ('use named export (not default)'). Export Sum as a named export (for example export const Sum = ...) and import it with import { Sum } from './components/Sum/Sum'.

mateacademy-ai-mentor · 2026-04-17T05:24:21Z

-// export const Sum = () => ();
+const Sum = ({ a = 0, b = 0 } = {}) => (
+  <p>
+    Sum of ${a} + ${b} is ${a + b}


This violates checklist item #2: 'Use string interpolation inside tag content'. The current code will render the literal ${a} text. Use JSX interpolation with a template string, for example: {Sum of ${a} and ${b} is ${a + b}}.

mateacademy-ai-mentor · 2026-04-17T05:24:21Z

+  </p>
+);
+
+export default Sum;


The task requires a named export for Sum ('use named export (not default)'). You're using export default Sum;. Change to a named export, e.g. export const Sum = ({ a = 0, b = 0 }) => ..., and update imports accordingly.

mateacademy-ai-mentor

Review Summary

I am requesting changes because the current implementation does not match the text format expected by the automated tests, so the core task is not yet passing.
In src/components/Sum/Sum.jsx (around line 5), the  in the Sum component currently renders a string like Sum of ${a} and ${b} is ${a + b}, but the tests assert on the exact phrase Sum of {a} + {b} is {a + b}, with a plus sign and spaces around it.
Update the template literal in that paragraph (and anywhere else you duplicate this message, such as in src/App.jsx if present) to use + instead of the word and, for example {Sum of ${a} + ${b} is ${a + b}}.
All other aspects look good: the component is a named export, a and b default to 0, and App.jsx renders the required five Sum usages with omitted props where appropriate.
Once you align the text exactly with the expected format, 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.

mateacademy-ai-mentor · 2026-04-17T05:53:25Z

@@ -1,14 +1,13 @@
 import React from 'react';
 import './App.scss';


This doesn't match the requirement from the description: "Create a Sum component accepting a and b props and rendering a paragraph with a text like Sum of 2 and 1 is 3." The template currently renders Sum of ${a} + ${b} is ${a + b} (uses +). Change it to use and, e.g. {Sum of ${a} and ${b} is ${a + b}} so the output matches the required wording.

mateacademy-ai-mentor · 2026-04-17T05:53:25Z

@@ -1 +1,3 @@
-// export const Sum = () => ();
+export const Sum = ({ a = 0, b = 0 } = {}) => (
+  <p>{`Sum of ${a} + ${b} is ${a + b}`}</p>


This violates the task requirement: "Create a Sum component accepting a and b props and rendering a paragraph with a text like Sum of 2 and 1 is 3." The current template uses a plus sign (+) between values. Update the template literal to use the word and, e.g. {Sum of ${a} and ${b} is ${a + b}} so the rendered text matches the required format.

task solution

c964735

mateacademy-ai-mentor suggested changes Apr 17, 2026

View reviewed changes

Vinicchii added 3 commits April 17, 2026 02:33

fixed

ae8e166

add named import

c5e836a

app fixed

5ef433f

Vinicchii requested a review from mateacademy-ai-mentor April 17, 2026 05:51

mateacademy-ai-mentor suggested changes Apr 17, 2026

View reviewed changes

Sum fixed

9fa7044

		@@ -1,14 +1,13 @@
		import React from 'react';
		import './App.scss';

Conversation

Vinicchii commented Apr 17, 2026

Uh oh!

mateacademy-ai-mentor left a comment

Choose a reason for hiding this comment

Review Summary

Footnotes

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mateacademy-ai-mentor left a comment

Choose a reason for hiding this comment

Review Summary

Footnotes

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants