Skip to content

Implement Person component with conditional rendering#3798

Open
kaida-iryna wants to merge 1 commit into
mate-academy:masterfrom
kaida-iryna:master
Open

Implement Person component with conditional rendering#3798
kaida-iryna wants to merge 1 commit into
mate-academy:masterfrom
kaida-iryna:master

Conversation

@kaida-iryna

Copy link
Copy Markdown

@mateacademy-ai-mentor mateacademy-ai-mentor left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

  1. Rate AI review example

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>}

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants