Develop

src/App.jsx

@@ -1,45 +1,35 @@
-import React from 'react';
-import './App.scss';
+import Person from './components/Person/Person';
 
-export const misha = {
- name: 'Misha',
- age: 37,
- sex: 'm',
- isMarried: true,
- partnerName: 'Natasha',
-};
+export const App = () => {
+ const misha = {
+ name: 'My name is Misha',
+ age: 37,
+ isMarried: true,
+ gender: 'male',
+ partnerName: 'Natasha',
+ };
 
-export const olya = {
- name: 'Olya',
- sex: 'f',
- isMarried: true,
- partnerName: 'Maksym',
-};
+  const olya = {
+  name: 'My name is Olya',
+  isMarried: true,
+  gender: 'female',
+  partnerName: 'Maksym',
+ };
 
-export const alex = {
- name: 'Alex',
- age: 25,
- sex: 'm',
- isMarried: false,
-};
+  const alex = {
+  name: 'My name is Alex',
+  age: 25,
+  isMarried: false,
+  gender: 'male',
+ };
 
-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>
+ return (
+ <div>
+ <Person person={misha} />
+ <Person person={olya} />
+ <Person person={alex} />
+ </div>
+ );
+};
 
- <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>
-);
+export default App;

src/components/Person/Person.jsx

@@ -1 +1,24 @@
-// export const Person = ({ person }) => ();
+import React from 'react';
+
+const Person = ({ person }) => {
+ const renderPartner = () => {
+ if (!person.isMarried) {
+ return 'I am not married';
+ }
+
+ return person.gender === 'male'
+ ? `${person.partnerName} is my wife`
+ : `${person.partnerName} is my husband`;
+ };
+
+ return (
+ <div className="Person">
+ <h2 className="Person__name">{person.name}</h2>
+ {person.age && <p className="Person__age">Age: {person.age}</p>}
+
+ <p className="Person__partner">{renderPartner()}</p>
+ </div>
+ );
+};
+
+export default Person;