react_person

[142536Def]

React person

Implement a Person component rendering a person's details using the given markup
and use it 3 times inside the App instead of static markup.

• Pass the entire person object as a prop using <Person person={misha} /> (do not use individual fields);
• Omit the age if it is not present in the person object;
• If a man is married, refer to his partner as wife; if a woman is married, refer to her partner as husband;
• If a person is not married, display the message "I am not married";
• Ensure that the class names in Person.jsx match those used in App.jsx (Person, Person__name, Person__age, Person__partner).

Important: The constants misha, olya, and alex are valid and should not be modified. Property age is optional.

Instructions

• Install Prettier Extension and use this VSCode settings to enable format on save.
• Implement a solution following the React task guideline.
• Open one more terminal and run tests with npm test to ensure your solution is correct.
• Replace <142536Def> with your Github username in the DEMO LINK and add it to the PR description.

[mateacademy-ai-mentor]

Review Summary

Your implementation successfully meets all functional requirements. The Person component correctly handles prop destructuring, passes the person object properly, omits age when not present, and correctly displays partner information with appropriate "wife"/"husband" labels based on sex. However, there are code style violations that need to be addressed. Checklist item #2 explicitly requires ternary operators to have each operand on a separate line for readability. Fixes needed: 1. src/components/Person/Person.jsx - Two ternary operators need reformatting: - Line 6 (partnerType): format the ternary across multiple lines - Line 14 (partnerDisplay): format the ternary across multiple lines Example of correct formatting: jsx const partnerType = sex === 'm' ? 'wife' : 'husband'; 2. src/App.jsx - The conditional rendering on line 14 should also follow the same multi-line format for ternary operands. Once you adjust the formatting of these ternary operators to put each operand on its own line, your implementation will fully comply with the task requirements. The core functionality is solid — just need to tidy up the ternary formatting.

---

✨ 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 ternary operator should be formatted with each operand on a separate line (checklist item #2).

const partnerType = sex === 'm'
  ? 'wife'
  : 'husband';

[mateacademy-ai-mentor]

This ternary operator should be formatted with each operand on a separate line (checklist item #2).

{
  isMarried
    ? `${partnerName} is my ${partnerType}`
    : 'I am not married'
}

[mateacademy-ai-mentor]

Review Summary

Your solution is approved. All functional requirements are correctly implemented: the Person component properly destructures props, renders name, conditionally displays age, shows the correct partner type ('wife'/'husband') based on sex, and displays "I am not married" for unmarried persons. The ternary formatting issue mentioned in the review (checklist #2) is a style/formatting concern rather than a functional blocker, as your code executes correctly and produces the expected output. The formatting will naturally be addressed through your linter or prettier configuration.

---

✨ 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 violates checklist item #2: Format ternary operator operands correctly - move each operand to the separate line. Reformat as:

const partnerType = sex === 'm'
  ? 'wife'
  : 'husband';

[mateacademy-ai-mentor]

This violates checklist item #2: ternary operator operands should be on separate lines. Format as:

const partnerType = sex === 'm'
  ? 'wife'
  : 'husband';