Skip to content
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

React props task 2 #1770

Open
wants to merge 4 commits into
base: master
Choose a base branch
from

Conversation

ElenaGrasovskaya
Copy link

@ElenaGrasovskaya ElenaGrasovskaya commented Oct 7, 2023

Copy link

@superpooperxxx superpooperxxx left a comment

Choose a reason for hiding this comment

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

Hey, cannot see the Demo link😢

Copy link

@polosanya polosanya left a comment

Choose a reason for hiding this comment

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

Good job! Let's improve your code a bit)

Comment on lines 4 to 6
<section className="Person">
<h2 className="Person__name">{`My name is ${person.name}`}</h2>
{person.age && <p className="Person__age">{`I am ${person.age}`}</p>}

Choose a reason for hiding this comment

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

Suggested change
<section className="Person">
<h2 className="Person__name">{`My name is ${person.name}`}</h2>
{person.age && <p className="Person__age">{`I am ${person.age}`}</p>}
<section className="Person">
<h2 className="Person__name">
{`My name is ${person.name}`}
</h2>
{person.age && (
<p className="Person__age">
{`I am ${person.age}`}
</p>
}

Fix formatting for better readability

Copy link
Author

Choose a reason for hiding this comment

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

Fixed that

{person.age && <p className="Person__age">{`I am ${person.age}`}</p>}
{person.isMarried ? (
<p className="Person__partner">
{`${person.partnerName} is my ${person.sex === 'm' ? 'wife' : 'husband'}`}

Choose a reason for hiding this comment

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

Avoid nesting ternary operators. Let's create a variable for wife/husband
image

Copy link
Author

Choose a reason for hiding this comment

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

created isMale boolean variable

Copy link

@superpooperxxx superpooperxxx left a comment

Choose a reason for hiding this comment

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

GJ🤗

import './Person.scss';

export const Person = ({ person }) => {
const isMale = person.sex === 'm';

Choose a reason for hiding this comment

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

I think it is better to save the whole condition with ternary operator to some variable like partner

const partner = person.sex === 'm' ? 'wife' : 'husband';
...
<p className="Person__partner">
  {`${person.partnerName} is my ${partner}`}
</p>

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.

3 participants