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}
+
+ );
+};