Conversation
mateacademy-ai-mentor
left a comment
mateacademy-ai-mentor
left a comment
There was a problem hiding this comment.
Review Summary
Good work on the core logic for the Person component! The conditional rendering for age and marital status is implemented correctly. However, changes are needed because of a critical error and a couple of style guide violations.
- Critical: In
src/App.jsx, thePersoncomponent is used but it hasn't been imported. This causes the application to crash. Please add the import statement at the top of the file. - Style: In
src/components/Person/Person.jsx, you need to fully destructure the properties from thepersonobject in the component's signature to comply with [CHECKLIST ITEM #1]. - Style: The nested ternary operator for displaying the partner's status should be formatted with each operand on a new line, as required by [CHECKLIST ITEM #2].
Please address these points to get your solution approved.
✨ 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
| @@ -1 +1,11 @@ | |||
| // export const Person = ({ person }) => (); | |||
| export const Person = ({ person }) => ( | |||
There was a problem hiding this comment.
Good job destructuring the person prop. To fully follow the style guide in checklist item #1 and improve readability, consider destructuring the properties within the person object as well. This will let you use variables like name, age, and sex directly in the JSX without the person. prefix.
src/components/Person/Person.jsx
Outdated
| {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.
This violates checklist item #2: 'Format ternary operator operands correctly - move each operand to the separate line'. The nested ternary operator should also be formatted with each part on a new line to improve readability, just like you did with the outer one.
| <Person person={misha} /> | ||
| <Person person={olya} /> | ||
| <Person person={alex} /> |
There was a problem hiding this comment.
The Person component is used here, but it hasn't been imported into this file. You need to import it to make it available for use.
mateacademy-ai-mentor
left a comment
mateacademy-ai-mentor
left a comment
There was a problem hiding this comment.
Review Summary
Great job fixing the import issue from the previous review! The app now runs, which is a big step forward. However, some changes are needed before this can be approved.
There's a critical issue in src/components/Person/Person.jsx with how props are destructured. The component receives a single person prop, so the props object looks like { person: { name: 'Misha', ... } }. Your current destructuring ({ name, age, sex, married, partner }) is looking for these properties at the top level of props, causing them all to be undefined. To fix this, you need to destructure the person object first. [CHECKLIST ITEM #1]
Additionally, the nested ternary operator for determining the partner's title ('wife' or 'husband') should be formatted across multiple lines for readability, as required by the style guide. [CHECKLIST ITEM #2]
Please address these two points, and your solution will be ready!
✨ 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
| @@ -1 +1,12 @@ | |||
| // export const Person = ({ person }) => (); | |||
| export const Person = ({ name, age, sex, isMarried, partnerName }) => ( | |||
There was a problem hiding this comment.
The component is called with a single person prop, like <Person person={misha} />. This means the props object looks like { person: { ... } }. The current destructuring expects name, age, etc. at the top level of props, which isn't the case here, causing all values to be undefined.
To fix this, you should first destructure the person object from props, and then access its properties.
src/components/Person/Person.jsx
Outdated
| {age && <p className="Person__age">I am {age}</p>} | ||
| <p className="Person__partner"> | ||
| {isMarried | ||
| ? `${partnerName} is my ${sex === 'm' ? 'wife' : 'husband'}` |
There was a problem hiding this comment.
This violates checklist item #2: '[CODE STYLE] - Readabily is everything. Format ternary operator operands correctly - move each operand to the separate line:'.
The nested ternary operator sex === 'm' ? 'wife' : 'husband' should also be formatted across multiple lines for readability. To keep the JSX clean, you could move this logic into a new variable defined before the return statement.
mateacademy-ai-mentor
left a comment
mateacademy-ai-mentor
left a comment
There was a problem hiding this comment.
Review Summary
I am approving this solution as an educational override so you can move on to the next task.
Excellent work fixing the props destructuring! The component now functions perfectly and meets all the core requirements. The only remaining issue is a minor code style violation in src/components/Person/Person.jsx that was also present in the last review.
The nested ternary operator for determining the partner's title should be split across multiple lines for better readability, as per our style guide. [CHECKLIST ITEM #2]
For example:
const partnerLabel = sex === 'm'
? 'wife'
: 'husband';Please keep this formatting in mind for future tasks. You've made great progress!
✨ Please rate this review in the Platform's notification center1. I will be grateful for your feedback! ✨
Footnotes
| <h2 className="Person__name">My name is {name}</h2> | ||
| {age && <p className="Person__age">I am {age}</p>} | ||
| <p className="Person__partner"> | ||
| {isMarried |
There was a problem hiding this comment.
This violates checklist item #2: 'Format ternary operator operands correctly - move each operand to the separate line'.
The nested ternary operator sex === 'm' ? 'wife' : 'husband' should be split across multiple lines for better readability. Consider creating a separate variable for the partner's title (e.g., wife or husband) before the return statement to make the JSX cleaner.
2 participants
No description provided.