add task solution#3736
Conversation
mateacademy-ai-mentor
left a comment
mateacademy-ai-mentor
left a comment
There was a problem hiding this comment.
Review Summary
Your solution has critical violations of task requirements that must be fixed. In App.jsx, you're passing individual props like age={37}, partner="Natasha", etc. to the Person components, but the requirement explicitly states to 'do not use individual fields' - only person={misha} should be passed. These extra props are dead code since Person.jsx only destructures the person object.
Additionally, there are three checklist violations in Person.jsx:
- [CHECKLIST ITEM #1] Properties like
name,age,sex,isMarried,partnerNameshould be destructured from thepersonobject, not accessed viaperson.propertyName - [CHECKLIST ITEM #2] The ternary operator condition and operands must be on separate lines for readability
- [CHECKLIST ITEM #3] The
person.sex === 'm' ? 'wife' : 'husband'expression should be extracted to a separate variable instead of being embedded directly in JSX
Please fix these issues and resubmit.
✨ 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 className="Person__age">I am 37</p> | ||
| <p className="Person__partner">Natasha is my wife</p> | ||
| </section> | ||
| <Person person={misha} age={37} partner="Natasha" /> |
There was a problem hiding this comment.
The task requirement states: 'Pass the entire person object as a prop using <Person person={misha} /> (do not use individual fields)'. This implementation passes individual props age={37} and partner="Natasha" which violates this requirement. These individual props are ignored by Person.jsx since it only destructures person.
| <h2 className="Person__name">My name is Olya</h2> | ||
| <p className="Person__partner">Maksym is my husband</p> | ||
| </section> | ||
| <Person person={olya} partner="Maksym" /> |
There was a problem hiding this comment.
The task requirement states: 'Pass the entire person object as a prop using <Person person={misha} /> (do not use individual fields)'. This implementation passes individual props partner="Maksym" which violates this requirement. These individual props are ignored by Person.jsx since it only destructures person.
| <p className="Person__age">I am 25</p> | ||
| <p className="Person__partner">I am not married</p> | ||
| </section> | ||
| <Person person={alex} age={25} /> |
There was a problem hiding this comment.
The task requirement states: 'Pass the entire person object as a prop using <Person person={misha} /> (do not use individual fields)'. This implementation passes individual props age={25} which violates this requirement. These individual props are ignored by Person.jsx since it only destructures person.
| @@ -1,5 +1,6 @@ | |||
| import React from 'react'; | |||
There was a problem hiding this comment.
Checklist item #1 requires using destructuring for getting access to values of props object. Currently only person is destructured, but properties like name, age, sex, isMarried, partnerName are accessed via person.propertyName instead of destructuring them.
| <h2 className="Person__name">{`My name is ${person.name}`}</h2> | ||
| {person.age && <p className="Person__age">I am {person.age}</p>} | ||
| <p className="Person__partner"> | ||
| {person.isMarried |
There was a problem hiding this comment.
Checklist item #2: Format ternary operator operands correctly - move each operand to the separate line. The ternary condition person.isMarried and its operands should be on separate lines for readability.
| {person.age && <p className="Person__age">I am {person.age}</p>} | ||
| <p className="Person__partner"> | ||
| {person.isMarried | ||
| ? `${person.partnerName} is my ${person.sex === 'm' ? 'wife' : 'husband'}` |
There was a problem hiding this comment.
Checklist item #3: Avoid putting several cases in conditional rendering. Create separate variable for the condition person.sex === 'm' ? 'wife' : 'husband' instead of embedding it directly in the JSX.
mateacademy-ai-mentor
left a comment
mateacademy-ai-mentor
left a comment
There was a problem hiding this comment.
Review Summary
Both App.jsx and Person.jsx have been correctly implemented, meeting all the requirements from the task. The person objects are properly passed as complete objects to the Person component, destructuring is used correctly in the component, ternary operators are formatted with operands on separate lines, and the partner labels are extracted to separate variables. The married/unmarried logic is correctly implemented with "Man = wife" and "Woman = husband" for the partner labels. Great work on following all the checklist items including the correct class naming convention and handling the optional age field properly.
✨ Please rate this review in the Platform's notification center1. I will be grateful for your feedback! ✨
Footnotes
3 participants
DEMO LINK