-
Notifications
You must be signed in to change notification settings - Fork 2.5k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
solution #2618
base: master
Are you sure you want to change the base?
solution #2618
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Great work! Almost done!
src/components/Person/Person.jsx
Outdated
@@ -1 +1,13 @@ | |||
// export const Person = ({ person }) => (); | |||
export const Person = ({ person }) => ( |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Consider using destructuring here
src/components/Person/Person.jsx
Outdated
<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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
<h2 className="Person__name">My name is {person.name}</h2> | |
{person.age && <p className="Person__age">I am {person.age}</p>} | |
<h2 className="Person__name">My name is {name}</h2> | |
{age && <p className="Person__age">I am {age}</p>} |
src/components/Person/Person.jsx
Outdated
{person.age && <p className="Person__age">I am {person.age}</p>} | ||
|
||
<p className="Person__partner"> | ||
{person.isMarried === true |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
{person.isMarried === true | |
{isMarried |
src/components/Person/Person.jsx
Outdated
? `${person.partnerName} is my ${person.sex === 'm' ? 'wife' : 'husband'}` | ||
: 'I am not married'} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
? `${person.partnerName} is my ${person.sex === 'm' ? 'wife' : 'husband'}` | |
: 'I am not married'} | |
? `${partnerName} is my ${sex === MAN ? 'wife' : 'husband'}` | |
: 'I am not married'} |
Consider creating const MAN = 'm'
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Awesome!
DEMO LINK
Implement a
Person
component rendering a person details using the given markupand use it 3 times inside the
App
instead of static markup.<Person person={misha} />
(not individual fields);age
if it is not given;wife
for a partner andhusband
if a woman is married;I am not married
message;Person.jsx
as inApp.jsx
(Person
,Person__name
,Person__age
,Person__partner
).