solution

[ATkachenkoA]

DEMO LINK

[mateacademy-ai-mentor]

Review Summary

Great work on implementing the core functionality! The Person component correctly renders all the required information, and it's used properly within the App component.

However, this requires a couple of changes to align the code with the project's checklist, which are considered blocking requirements for this task.

1. Incomplete Prop Destructuring [CHECKLIST ITEM #1]: In src/components/Person/Person.jsx, while you've destructured person from props, you should also destructure the properties within the person object (like name, age, sex). This makes the code cleaner by avoiding repetition of person..
2. Complex Conditions in JSX [CHECKLIST ITEM #3]: The conditional logic for rendering marriage status (e.g., person.isMarried && person.sex === 'm') should be extracted into separate, descriptively named variables before the return statement. This improves readability significantly.

Once these style issues are addressed, your solution will be ready for approval!

---

✨ Please rate this review in the Platform's notification center¹. 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 button² 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 tag³.
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. Rate AI review example ↩

2. Re-request AI review example ↩

3. Add AI review comments example ↩

[mateacademy-ai-mentor]

This violates checklist item #1: 'Use destructuring for getting access to values of props object'. While you have correctly destructured the person object from props, you should also destructure the properties within the person object (e.g., name, age, sex). This avoids repeating person. throughout your component and makes the code cleaner.

[mateacademy-ai-mentor]

This violates checklist item #3: 'Avoid putting several cases to conditional rendering. Create separate variable for the condition'. Instead of chaining multiple conditions with && directly in the JSX, it's better to extract this logic into a descriptive boolean variable. For example: const isMarriedMan = person.isMarried && person.sex === 'm';. The same applies to the condition on lines 13-14.

[mateacademy-ai-mentor]

Review Summary

Excellent work on this iteration! You've effectively addressed the previous feedback, and your solution now meets all the requirements. I am happy to approve your submission.

For future reference, here are a couple of minor style improvements for src/components/Person/Person.jsx:

• The ternary operator should be formatted across multiple lines for better readability, as per [CHECKLIST ITEM #2].
• For consistency, it's best to use the age variable you destructured instead of accessing person.age again.

Great job overall!

---

✨ Please rate this review in the Platform's notification center¹. I will be grateful for your feedback! ✨

Footnotes

1. Rate AI review example ↩

[mateacademy-ai-mentor]

This line has a couple of minor issues:

1. According to checklist item Solution #2, this ternary operator should be formatted across multiple lines for better readability.
2. You have already destructured age from person on line 2. For consistency, you should use the age variable here instead of person.age.