diff --git a/src/App.jsx b/src/App.jsx index dcf8509c84..eb67351283 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,4 +1,5 @@ import React from 'react'; +import { Person } from './components/Person/Person'; import './App.scss'; export const misha = { @@ -25,21 +26,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 eccf156a37..4bea15c109 100644 --- a/src/components/Person/Person.jsx +++ b/src/components/Person/Person.jsx @@ -1 +1,21 @@ -// export const Person = ({ person }) => (); +import React from 'react'; + +export const Person = ({ person }) => { + const partnerRole = person.sex === 'm' ? 'wife' : 'husband'; + + return ( +
+

My name is {person.name}

+ + {person.age &&

I am {person.age}

} + + {person.isMarried ? ( +

+ {person.partnerName} is my {partnerRole} +

+ ) : ( +

I am not married

+ )} +
+ ); +}; diff --git a/src/components/Person/Person.spec.jsx b/src/components/Person/Person.spec.jsx index e863082581..5db97e9ecb 100644 --- a/src/components/Person/Person.spec.jsx +++ b/src/components/Person/Person.spec.jsx @@ -1,3 +1,4 @@ +/* eslint-disable import/named */ import { mount } from '@cypress/react18'; import { Person } from './Person';