task solution

checklist.md

@@ -26,15 +26,15 @@ export const Component = ({
 );
 ```
 
-ALSO GOOD EXAMPLE: 
+ALSO GOOD EXAMPLE:
 
 ```jsx
 export const Component = (props) => {
  const {
-  firstProperty,
+  name,
   secondProperty,
   thirdProperty
-} = props; 
+} = props;
 
  return (
   <>
@@ -54,8 +54,8 @@ const value = condition ? firstValue : secondValue;
 
 GOOD EXAMPLE:
 ```jsx
-const value = condition 
-  ? firstValue 
+const value = condition
+  ? firstValue
   : secondValue;
 ```
 
@@ -64,7 +64,7 @@ const value = condition
 
 BAD EXAMPLE:
 ```jsx
-{listEnabled && list.length && smthElse > 0 
+{listEnabled && list.length && smthElse > 0
   ? <ComponentOne />
   : <ComponentTwo />}
 ```

package.json

@@ -17,7 +17,7 @@
   "devDependencies": {
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@mate-academy/eslint-config-react": "latest",
-    "@mate-academy/scripts": "^1.7.9",
+    "@mate-academy/scripts": "^1.8.1",
     "@mate-academy/stylelint-config": "latest",
     "cypress": "^12.17.4",
     "eslint": "^7.32.0",

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',
@@ -26,20 +27,15 @@ 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>
+      <Person person={misha} />
     </section>
 
     <section className="Person">
-      <h2 className="Person__name">My name is Olya</h2>
-      <p className="Person__partner">Maksym is my husband</p>
+      <Person person={olya} />
     </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>
+      <Person person={alex} />
     </section>
   </div>
 );

src/components/Person/Person.jsx

@@ -1 +1,23 @@
-// export const Person = ({ person }) => ();
+export const Person = ({ person = {} }) => {
+  let isAge = null;
+  let marriedPargraph = <p className="Person__partner">I am not married</p>
+  if('age' in person) {
+    isAge = <p className="Person__age">I am {person.age}</p>
+  }
+
+  if(person.isMarried) {
+    if(person.sex === 'm') {
+      marriedPargraph = <p className="Person__partner">{person.partnerName} is my wife</p>
+    } else {
+      marriedPargraph = <p className="Person__partner">{person.partnerName} is my husband</p>
+    }
+  }
+
+  return (
+    <section>
+      <h2 className="Person__name">My name is {person.name}</h2>
+      {isAge}
+      {marriedPargraph}
+    </section>
+  )
+ };