Implement Person component with conditional rendering#3798
Conversation
mateacademy-ai-mentor
left a comment
There was a problem hiding this comment.
Review Summary
Your solution is approved because it correctly implements all the required Person behavior: it uses the person prop, renders the correct texts for married/unmarried people, and applies the specified class names. Functionally, the conditional rendering of age works as intended and does not break any requirements or tests, since age is optional and is correctly omitted when missing. The only remaining point is a style/readability improvement: instead of using an inline condition like {person.age && ...}, you could precompute something like const hasAge = person.age !== undefined; or const ageContent = person.age ? (...) : null; before the return and then use that in JSX to better align with the checklist guidance about avoiding multiple cases directly in JSX. This is not a critical blocker, but adopting that pattern will make your components easier to read and maintain in future tasks. Overall, nice work following the task requirements and handling the partner text and optional age cleanly.
✨ Please rate this review in the Platform's notification center1. I will be grateful for your feedback! ✨
Footnotes
| return ( | ||
| <section className="Person"> | ||
| <h2 className="Person__name">{`My name is ${person.name}`}</h2> | ||
| {person.age && <p className="Person__age">{`I am ${person.age}`}</p>} |
There was a problem hiding this comment.
The inline conditional {person.age && ...} can be seen as combining the age presence check directly into JSX. To better follow checklist item #3 ("Avoid putting several cases to conditional rendering. Create separate variable for the condition."), consider computing a boolean or an ageContent variable before the return and using that inside JSX instead of the inline && expression.
https://kaida-iryna.github.io/react_person/