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.

Sign up for GitHub

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

finished #1858

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

finished #1858

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
1d0ca4b
finished
Fluebubble Nov 16, 2023
d20898e
added code formatting
Fluebubble Nov 16, 2023
c9e263a
fixed
Fluebubble Nov 18, 2023
f336f18
readme demo link fixed
Fluebubble Nov 20, 2023
71a183d
deployed
Fluebubble Nov 20, 2023
15f7f02
added formatting and new var
Fluebubble Nov 20, 2023
8934e7c
added more formatting
Fluebubble Nov 20, 2023
0ddd64d
readme changed
Fluebubble Nov 21, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 6 additions & 18 deletions src/App.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import React from 'react';
import './App.scss';
import { Person } from './components/Person/Person';

export const misha = {
name: 'Misha',
Expand All @@ -24,22 +25,9 @@ export const alex = {
};

export const App = () => (
<div className="App">
<section className="Person">
<h2 className="Person__name">My name is Misha</h2>
<p className="Person__age">I am 37</p>
<p className="Person__partner">Natasha is my wife</p>
</section>

<section className="Person">
<h2 className="Person__name">My name is Olya</h2>
<p className="Person__partner">Maksym is my husband</p>
</section>

<section className="Person">
<h2 className="Person__name">My name is Alex</h2>
<p className="Person__age">I am 25</p>
<p className="Person__partner">I am not married</p>
</section>
</div>
<>
<Person person={misha} />
<Person person={olya} />
<Person person={alex} />
</>
);
19 changes: 18 additions & 1 deletion src/components/Person/Person.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,18 @@
// export const Person = ({ person }) => ();
export const Person = ({ person }) => {
const { name, age, sex, partnerName, isMarried } = person;
const SEX_FEMALE = 'f';

return (
<>
<section className="Person">
<h2 className="Person__name">{`My name is ${name}`}</h2>
Copy link

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">
<section className="Person">

React fragment is redundant here as you already have a container

{age && <p className="Person__age">{`I am ${age}`}</p>}
<p className="Person__partner">
{isMarried
Copy link

Choose a reason for hiding this comment

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

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

Pay attention to the formatting

? `${partnerName} is my ${sex === SEX_FEMALE ? 'husband' : 'wife'}`
: 'I am not married'}
Copy link

Choose a reason for hiding this comment

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

Let's create a variable for husband/wife to avoid nesting ternary operators
image

Suggested change
? `${partnerName} is my ${sex === SEX_FEMALE ? 'husband' : 'wife'}`
? `${partnerName} is my ${partner}`

Copy link
Author

Choose a reason for hiding this comment

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

change added 4 days ago, but I didn't sent them to check:(

</p>
</section>
</>
);
};
Loading