Solution#4263
Conversation
mateacademy-ai-mentor
left a comment
mateacademy-ai-mentor
left a comment
There was a problem hiding this comment.
Review Summary
Your implementation has 2 critical issues that must be fixed before approval:
-
Missing required Sum component:
App.jsxcontains only 4Suminstances, but 5 are required per the task description. You need to add a fifth<Sum />component with no props at all to test the default prop behavior (0 + 0 = 0). -
Checklist item #2 violation: The text rendering in
Sum.jsxuses separate JSX expressions (Sum of {a} and {b} is {a + b}) instead of template literal string interpolation (`Sum of ${a} and ${b} is ${a + b}`). This is an explicit checklist requirement.
Note: The failing E2E test in
cypress/integration/page.spec.js(line 33) expects4but your component correctly outputs0. This appears to be a test bug unrelated to your implementation - your component behavior is correct as confirmed by the passing unit tests inSum.spec.jsx. You may want to flag this to an instructor, but it's not something you need to fix in your code.
Once these two issues are addressed, your implementation should be ready for approval.
✨ Please rate this review in the Platform's notification center1. 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 button2 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 tag3.
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
| Sum of {a} and {b} is {a + b} | ||
| </p> | ||
| </div> | ||
| ); | ||
| }; |
There was a problem hiding this comment.
Add a fifth <Sum /> component with no props to match the requirement: 'no params at all'
| <div> | ||
| <p> | ||
| Sum of {a} and {b} is {a + b} | ||
| </p> |
There was a problem hiding this comment.
Checklist item #1 violation: Components with < 3 attributes should be written in one line. This has 2 attributes.
| <p> | ||
| Sum of {a} and {b} is {a + b} | ||
| </p> | ||
| </div> |
There was a problem hiding this comment.
Checklist item #1 violation: Components with < 3 attributes should be written in one line. This has 2 attributes.
| export const App = () => ( | ||
| <> | ||
| <p>Sum of 2 and 3 is 5</p> | ||
| <p>Sum of -5 and 5 is 0</p> | ||
| <p>Sum of 10 and 0 is 10</p> | ||
| <p>Sum of 0 and 5 is 5</p> | ||
| <p>Sum of 0 and 0 is 0</p> | ||
| {/* Replace paragraphs with Sum componets */} | ||
| {/* And remove commented lines :) */} | ||
| <Sum a={2} b={3} /> | ||
| <Sum a={-5} b={5} /> | ||
| <Sum a={10} /> | ||
| <Sum b={5} /> |
There was a problem hiding this comment.
The App component is missing <Sum /> with no params at all, which is required by the task description.
| import { Sum } from './components/Sum/Sum'; | ||
|
|
||
| export const App = () => ( | ||
| <> |
There was a problem hiding this comment.
This uses separate JSX expressions instead of string interpolation with template literals. Per checklist item #2, use template literal syntax: {Sum of ${a} and ${b} is ${a + b}}
mateacademy-ai-mentor
left a comment
mateacademy-ai-mentor
left a comment
There was a problem hiding this comment.
Review Summary
Your implementation correctly added the fifth <Sum /> component and meets most requirements. However, checklist item #2 is still violated in src/components/Sum/Sum.jsx — the component uses separate JSX expressions (Sum of {a} and {b} is {a + b}) instead of the required template literal string interpolation. Change line 8 in Sum.jsx from Sum of {a} and {b} is {a + b} to {`Sum of ${a} and ${b} is ${a + b}`}. This is a one-line fix that aligns your code with the explicit checklist requirement.
✨ Please rate this review in the Platform's notification center1. 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 button2 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 tag3.
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
| export const App = () => ( | ||
| <> |
There was a problem hiding this comment.
This violates checklist item #2: Use string interpolation inside tag content. Replace with template literal: {Sum of ${a} and ${b} is ${a + b}}
| <p> | ||
| Sum of {a} and {b} is {a + b} |
There was a problem hiding this comment.
This violates checklist item #2 - use template literal string interpolation: {Sum of ${a} and ${b} is ${a + b}} instead of separate JSX expressions.
mateacademy-ai-mentor
left a comment
mateacademy-ai-mentor
left a comment
There was a problem hiding this comment.
Review Summary
This is an educational override to help you progress while learning. You've done well — the Sum component structure is correct with named exports, default props, and the App properly contains all 5 instances. However, there are two critical fixes needed: [CHECKLIST ITEM #2] In src/components/Sum/Sum.jsx, the template literal uses literal {a} instead of ${a} for interpolation — it should be {`Sum of ${a} and ${b} is ${a + b}`} with proper ${} syntax and the whole thing wrapped in {}. Also change the <div> to a <p> tag as required. In src/App.jsx, make sure the template literal is wrapped with {} to be a valid JSX expression. These syntax fixes should resolve the test failures. Keep going — you're close!
✨ Please rate this review in the Platform's notification center1. 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 button2 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 tag3.
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
| export const Sum = ({ a = 0, b = 0 }) => { | ||
| return ( | ||
| <div> | ||
| `Sum of {a} and {b} is {a + b}` |
There was a problem hiding this comment.
This violates checklist item #2 — use template literal interpolation with ${a} and ${b}, not literal {a} and {b}. The JSX also needs curly braces around the template literal expression. Also, per the task description, render a <p> tag instead of <div> for the paragraph.
| import './App.scss'; | ||
| import { Sum } from './components/Sum/Sum'; | ||
|
|
||
| export const App = () => ( |
There was a problem hiding this comment.
This line is missing the {} wrapper required for JSX expressions. The template literal should be wrapped to become a JSX expression: {Sum of ${a} and ${b} is ${a + b}}. Currently, the backticks and braces are rendered as literal text rather than being evaluated as JavaScript.
3 participants
https://cassiaqueiroz.github.io/react_sum/