diff --git a/src/App.jsx b/src/App.jsx index dcf8509c8..a52943bf7 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,5 +1,6 @@ import React from 'react'; import './App.scss'; +import { Person } from './components/Person/Person'; export const misha = { name: 'Misha', @@ -8,14 +9,12 @@ export const misha = { isMarried: true, partnerName: 'Natasha', }; - export const olya = { name: 'Olya', sex: 'f', isMarried: true, partnerName: 'Maksym', }; - export const alex = { name: 'Alex', age: 25, @@ -25,21 +24,8 @@ export const alex = { export const App = () => (
-
-

My name is Misha

-

I am 37

-

Natasha is my wife

-
- -
-

My name is Olya

-

Maksym is my husband

-
- -
-

My name is Alex

-

I am 25

-

I am not married

-
+ + +
); diff --git a/src/components/Person/Person.jsx b/src/components/Person/Person.jsx index eccf156a3..edcd628b5 100644 --- a/src/components/Person/Person.jsx +++ b/src/components/Person/Person.jsx @@ -1 +1,18 @@ -// export const Person = ({ person }) => (); +import React from 'react'; + +export const Person = ({ person }) => { + const { name, age, sex, isMarried, partnerName } = person; + + const partnerLabel = sex === 'm' ? 'wife' : 'husband'; + const partnerInfo = isMarried + ? `${partnerName} is my ${partnerLabel}` + : 'I am not married'; + + return ( +
+

My name is {name}

+ {age &&

I am {age}

} +

{partnerInfo}

+
+ ); +};