Mate academy React Props#3848
Conversation
mateacademy-ai-mentor
left a comment
mateacademy-ai-mentor
left a comment
There was a problem hiding this comment.
Review Summary
Decision: REQUEST_CHANGES
Your current src/App.jsx does not meet the core requirement to use the Sum component, which is a critical blocker for task completion and tests.
Critical issues to fix:
- Line(s) in
src/App.jsxwhere five<p>elements are rendered instead ofSumcomponents (likely around the return ofApp): You must render fiveSuminstances with the specified props. This violates checklist item #3 that requires: “The App component must render five Sum component instances with the following props…”. - Missing import/usage of
Sum: There is noimport { Sum } from './Sum.jsx'(or wherever it’s defined) and no<Sum ... />usages. - Missing
Sumcomponent implementation: The task requires a reusableSumcomponent that accepts numeric propsaandb, defaults missing values to0, and renders the paragraph with the computed sum. Without it, the defaulting behavior and component reuse can’t be validated.
Why this is wrong:
- The assignment’s core goal is to demonstrate component reuse and prop defaulting. Rendering five
<p>tags duplicates logic and bypasses the requirement to implement and useSum, so tests expectingSumwill fail.
How to fix (hints):
- Implement and export a named
Sumcomponent (e.g., insrc/Sum.jsx):- Accept props
aandband default them to0when not provided. - Render exactly the required paragraph text showing the sum.
- Accept props
- In
src/App.jsx:- Import the named
Sumcomponent:import { Sum } from './Sum.jsx'(adjust path as needed). - Replace the five
<p>lines with five<Sum />instances using the specified props. For example: ` - // b defaults to 0
- // a defaults to 0
- // both default to 0
`
- Import the named
Minor improvements (optional):
- Keep the
Sumusages single-line for clarity, and ensure consistent numeric prop types.
You’ve shown solid JSX rendering of sums; now channel that into a reusable Sum component and wire it into App. You’re close—once Sum is implemented and used as required, you should be all set!
✨ 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
| <p>Sum of 0 and 0 is 0</p> | ||
| {/* Replace paragraphs with Sum componets */} | ||
| {/* And remove commented lines :) */} | ||
| <p>Sum of {a} and {b} is {a + b}</p> |
There was a problem hiding this comment.
This violates the requirement to render five instances of the Sum component with the specified props. Instead, you are rendering five
elements directly. You must import and use the Sum component as described in the task requirements and checklist item #3: 'The App component must render five Sum component instances with the following props...'.
| {/* Replace paragraphs with Sum componets */} | ||
| {/* And remove commented lines :) */} | ||
| <p>Sum of {a} and {b} is {a + b}</p> | ||
| <p>Sum of {a} and {b} is {a + b}</p> |
There was a problem hiding this comment.
This violates the requirement to render five instances of the Sum component with the specified props. Instead, you are rendering five
elements directly. You must import and use the Sum component as described in the task requirements and checklist item #3: 'The App component must render five Sum component instances with the following props...'.
| {/* And remove commented lines :) */} | ||
| <p>Sum of {a} and {b} is {a + b}</p> | ||
| <p>Sum of {a} and {b} is {a + b}</p> | ||
| <p>Sum of {a} and {b} is {a + b}</p> |
There was a problem hiding this comment.
This violates the requirement to render five instances of the Sum component with the specified props. Instead, you are rendering five
elements directly. You must import and use the Sum component as described in the task requirements and checklist item #3: 'The App component must render five Sum component instances with the following props...'.
| <p>Sum of {a} and {b} is {a + b}</p> | ||
| <p>Sum of {a} and {b} is {a + b}</p> | ||
| <p>Sum of {a} and {b} is {a + b}</p> | ||
| <p>Sum of {a} and {b} is {a + b}</p> |
There was a problem hiding this comment.
This violates the requirement to render five instances of the Sum component with the specified props. Instead, you are rendering five
elements directly. You must import and use the Sum component as described in the task requirements and checklist item #3: 'The App component must render five Sum component instances with the following props...'.
| <p>Sum of {a} and {b} is {a + b}</p> | ||
| <p>Sum of {a} and {b} is {a + b}</p> | ||
| <p>Sum of {a} and {b} is {a + b}</p> | ||
| <p>Sum of {a} and {b} is {a + b}</p> |
There was a problem hiding this comment.
This violates the requirement to render five instances of the Sum component with the specified props. Instead, you are rendering five
elements directly. You must import and use the Sum component as described in the task requirements and checklist item #3: 'The App component must render five Sum component instances with the following props...'.
2 participants
No description provided.