solution #3552
solution #3552
Conversation
mateacademy-ai-mentor
left a comment
mateacademy-ai-mentor
left a comment
There was a problem hiding this comment.
Review Summary
Great work on implementing the required functionality! The component logic is correct and all features work as expected. However, this submission requires changes because it violates two explicit checklist items related to code style, which are part of the task's requirements.
In src/components/Person/Person.jsx, please make the following adjustments:
- Complete Prop Destructuring: Destructure the properties from the
personobject (name,age, etc.) at the top of your component to make the JSX cleaner. This addresses [CHECKLIST ITEM #1]. - Ternary Operator Formatting: For better readability, format the ternary operator used to define
partnerRoleby placing each operand on a new line, as required by [CHECKLIST ITEM #2].
Once you've addressed these formatting issues, your solution will be good to go!
✨ 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
| @@ -1 +1,15 @@ | |||
| // export const Person = ({ person }) => (); | |||
| export const Person = ({ person }) => { | |||
There was a problem hiding this comment.
This violates checklist item #1: 'Use destructuring for getting access to values of props object'.
While you have correctly destructured the person prop, you should also destructure the properties within the person object (like name, age, sex, etc.). This will make your JSX cleaner and easier to read by removing the repetitive person. prefix.
src/components/Person/Person.jsx
Outdated
| @@ -1 +1,15 @@ | |||
| // export const Person = ({ person }) => (); | |||
| export const Person = ({ person }) => { | |||
| const partnerRole = person.sex === 'm' ? 'wife' : 'husband'; | |||
There was a problem hiding this comment.
This violates checklist item #2: 'Format ternary operator operands correctly - move each operand to the separate line'.
For improved readability, this ternary operator should be split across multiple lines.
mateacademy-ai-mentor
left a comment
mateacademy-ai-mentor
left a comment
There was a problem hiding this comment.
Review Summary
Great job addressing the destructuring feedback from the last review! The component's logic is correct. However, this solution requires changes because a key code style requirement is still not met.
The ternary operators in src/components/Person/Person.jsx must be formatted with each operand on a separate line, as specified in [CHECKLIST ITEM #2]. This was also pointed out in the previous review. Correct formatting is crucial for code readability.
For example:
const partnerInfo = person.isMarried
? `My ${partnerRole} is ${person.partnerName}`
: 'I am not married';Additionally, for consistency, please use the destructured age variable directly instead of person.age. Once you've fixed the formatting, this will be ready to go!
✨ 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
src/components/Person/Person.jsx
Outdated
| export const Person = ({ person }) => { | ||
| const { name, age, sex, isMarried, partnerName } = person; | ||
|
|
||
| const partnerRole = sex === 'm' ? 'wife' : 'husband'; |
There was a problem hiding this comment.
This violates checklist item #2: 'Format ternary operator operands correctly - move each operand to the separate line'. This was also pointed out in the previous review. Please format the ternary operator for better readability.
src/components/Person/Person.jsx
Outdated
| <section className="Person"> | ||
| <h2 className="Person__name">{`My name is ${name}`}</h2> | ||
|
|
||
| {person.age && <p className="Person__age">I am {age}</p>} |
There was a problem hiding this comment.
You've correctly destructured age on line 2. For consistency, it's better to use the age variable directly here instead of accessing it through person.age.
src/components/Person/Person.jsx
Outdated
| {person.age && <p className="Person__age">I am {age}</p>} | ||
|
|
||
| <p className="Person__partner"> | ||
| {isMarried ? `${partnerName} is my ${partnerRole}` : 'I am not married'} |
There was a problem hiding this comment.
This ternary operator also needs to be formatted according to checklist item #2, with each part on a new line.
mateacademy-ai-mentor
left a comment
mateacademy-ai-mentor
left a comment
There was a problem hiding this comment.
Review Summary
Excellent work on this submission! I'm happy to approve it. You've done a fantastic job addressing all the feedback from the previous review, especially with formatting the ternary operators [CHECKLIST ITEM #2]. The components are well-structured, the logic is sound, and the code is clean and easy to read. This solution perfectly meets all the task requirements. Keep up the great work!
✨ Please rate this review in the Platform's notification center1. I will be grateful for your feedback! ✨
Footnotes
2 participants
DEMO LINK