add solution

[ybriukhovetska]

DEMO LINK

[mateacademy-ai-mentor]

Review Summary

Your solution is approved because all core functional requirements are correctly implemented: Person is reused three times, the full person object is passed, age is omitted when missing, and the partner wording and “I am not married” behavior work as specified. The remaining issues are primarily style and checklist-related, not functionality blockers.

That said, there are a few improvements you should keep in mind for future tasks. In both App.jsx and Person.jsx, avoid using the extra className="App" wrapper and stick to the required Person, Person__name, Person__age, and Person__partner class names so the markup is fully aligned with the instructions. Also, reformat your ternary operators so each operand (condition, true branch, false branch) is on its own line, and extract conditions like person.isMarried into separate variables before using them in JSX for clearer conditional rendering [CHECKLIST ITEM #2, CHECKLIST ITEM #3]. Overall, you’ve handled the logic correctly; refining the class names and conditional formatting will improve readability and better match the prescribed style guidelines. Great job on meeting the functional requirements.

---

✨ 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]

Checklist item #2 says: Format ternary operator operands correctly - move each operand to the separate line. Here, the conditional rendering for age uses an inline ternary-like short-circuit expression in one line; consider rewriting it across multiple lines for readability as shown in the GOOD EXAMPLE.

[mateacademy-ai-mentor]

The wrapper div uses className="App", but the description only specifies using Person, Person__name, Person__age, and Person__partner, and asks to ensure class names in Person.jsx match those in App.jsx. This extra App class can violate that requirement; consider removing or renaming it to stay within the specified class set.

[mateacademy-ai-mentor]

The outer container uses className="App", but the task requires that class names in Person.jsx match the Person-related names (Person, Person__name, Person__age, Person__partner). Consider removing or renaming this wrapper to avoid the App class here and keep only the specified Person classes.

[mateacademy-ai-mentor]

This line combines conditional rendering directly with a JSX fragment using short-circuit evaluation. While it hides age when missing, it doesn’t follow checklist item #3: "Avoid putting several cases to conditional rendering. Create separate variable for the condition." Consider introducing a separate variable (e.g. const showAge = Boolean(person.age);) and then using it for rendering.

[mateacademy-ai-mentor]

This ternary mixes condition and both JSX branches on a single line, which violates checklist item #2: "Format ternary operator operands correctly - move each operand to the separate line" and item #3 about avoiding complex conditional rendering. It would be clearer to extract the isMarried condition to a separate variable and format the ternary with each operand on its own line.

[mateacademy-ai-mentor]

The nested ternary person.sex === 'm' ? 'wife' : 'husband' is written on a single line, which violates checklist item #2: "Format ternary operator operands correctly - move each operand to the separate line." Please format this ternary so that the condition, true value, and false value are on separate lines for readability.