diff --git a/README.md b/README.md index 3424ccb86..a2ec49ee7 100644 --- a/README.md +++ b/README.md @@ -12,4 +12,4 @@ and use it 3 times inside the `App` instead of static markup. ## Instructions - Implement a solution following the [React task guideline](https://github.com/mate-academy/react_task-guideline#react-tasks-guideline). - Open one more terminal and run tests with `npm test` to ensure your solution is correct. -- Replace `` with your Github username in the [DEMO LINK](https://.github.io/react_person/) and add it to the PR description. +- Replace `` with your Github username in the [DEMO LINK](https://alina-isakova.github.io/react_person/) and add it to the PR description. diff --git a/src/App.jsx b/src/App.jsx index bffcc7fdf..6b852f9bc 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -26,16 +26,10 @@ export const alex = { export const App = () => (
- + - + - +
); diff --git a/src/components/Person/Person.jsx b/src/components/Person/Person.jsx index b525ec4e7..c39b95710 100644 --- a/src/components/Person/Person.jsx +++ b/src/components/Person/Person.jsx @@ -1,23 +1,28 @@ -export const Person = ({ person }) => ( -
- <> -

- {`My name is ${person.name}`} -

+export const Person = ({ person }) => { + const { name, age, sex, isMarried, partnerName } = person; + const partner = sex === 'm' ? 'wife' : 'husband'; - {person.age && ( -

- {`I am ${person.age}`} -

- )} + return ( +
+ <> +

+ {`My name is ${name}`} +

-

- {person.isMarried === true ? ( - `${person.partnerName} is my ${person.sex === 'm' ? 'wife' : 'husband'}` - ) : ( - 'I am not married' + {age && ( +

+ {`I am ${age}`} +

)} -

- -
-); + +

+ {isMarried ? ( + `${partnerName} is my ${partner}` + ) : ( + 'I am not married' + )} +

+ +
+ ); +};