https://github.com/yuriyvyatkin/ra-hw-2.1-portfolio
ДЗ №1 к лекции «События и состояние» курса «React» Нетологии
https://github.com/yuriyvyatkin/ra-hw-2.1-portfolio
reactjs usestate-hook
Last synced: 13 days ago
JSON representation
ДЗ №1 к лекции «События и состояние» курса «React» Нетологии
- Host: GitHub
- URL: https://github.com/yuriyvyatkin/ra-hw-2.1-portfolio
- Owner: yuriyvyatkin
- Created: 2021-10-28T05:45:41.000Z (almost 4 years ago)
- Default Branch: master
- Last Pushed: 2021-10-31T02:15:08.000Z (almost 4 years ago)
- Last Synced: 2025-06-15T18:57:54.659Z (4 months ago)
- Topics: reactjs, usestate-hook
- Language: JavaScript
- Homepage: https://yuriyvyatkin.github.io/ra-hw-2.1-portfolio/
- Size: 1.87 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Домашнее задание №1 к лекции «События и состояние»
[](https://ci.appveyor.com/project/yuriyvyatkin/ra-hw-2-1-portfolio)
[Ссылка на Github Pages](https://yuriyvyatkin.github.io/ra-hw-2.1-portfolio/)
Портфолио с фильтрами
===
Необходимо реализовать портфолио с фильтрами, аналогичное указанному на изображении.
## Описание проекта
Разработайте компонент класса `Portfolio` хранящий список фильтров (а также активный фильтр) а также список проектов.
Сами фильтры отображаются в компоненте без состояния `Toolbar`, которому от `Portfolio` мы передаем три свойства:
- `filters` - список фильтров, название которых совпадает с категориями проектов,
- `selected` - активный фильтр,
- `onSelectFilter(filter)` - обработчик события, который реагирует на выбор пользователем одного из фильтров, обработчик принимает один аргумент — строку с названием фильтра.
Пример:
```
{console.log(filter);}}/>
```
В данном примере при выборе фильтра его название будет выведено в консоль. Например «Business Cards».
Изображения самих проектов отображаются компонентом без состояния `ProjectList`, которому от `Portfolio` мы передаем список проектов — в свойство `projects`. Отображение проектов — это единственная ответственность компонента `ProjectList`.
Чтобы компонент `Portfolio` мог реагировать на выбор пользователем фильтра проектов, например `Business Cards`, и передававать отфильтрованные по категории `Business Cards` проекты в компонент `ProjectList`, в класс `Portfolio` необходимо добавить состояние (state).
Ваша задача:
- установить состояние выбранного фильтра в обработчике события который `Portfolio` передает в свойство `onSelectFilter` компонента `Toolbar`
- из компонента `Portfolio` передать активный фильтр в свойство `selected` компонента `Toolbar`
- в компоненте `Portfolio` отфильтровать по активному фильтру проекты и передать их в компонент `ProjectList`
Набор данных для отображения:
```js
[{
img: "https://raw.githubusercontent.com/netology-code/ra16-homeworks/master/events-state/filter/img/mon.jpg",
category: "Business Cards"
}, {
img: "https://raw.githubusercontent.com/netology-code/ra16-homeworks/master/events-state/filter/img/200.jpg",
category: "Websites"
}, {
img: "https://raw.githubusercontent.com/netology-code/ra16-homeworks/master/events-state/filter/img/emi_haze.jpg",
category: "Websites"
}, {
img: "https://raw.githubusercontent.com/netology-code/ra16-homeworks/master/events-state/filter/img/codystretch.jpg",
category: "Websites"
}, {
img: "https://raw.githubusercontent.com/netology-code/ra16-homeworks/master/events-state/filter/img/Triangle_003.jpg",
category: "Business Cards"
}, {
img: "https://raw.githubusercontent.com/netology-code/ra16-homeworks/master/events-state/filter/img/place200x290.png",
category: "Websites"
}, {
img: "https://raw.githubusercontent.com/netology-code/ra16-homeworks/master/events-state/filter/img/200.jpg",
category: "Websites"
}, {
img: "https://raw.githubusercontent.com/netology-code/ra16-homeworks/master/events-state/filter/img/transmission.jpg",
category: "Business Cards"
}, {
img: "https://raw.githubusercontent.com/netology-code/ra16-homeworks/master/events-state/filter/img/place200x290_1.png",
category: "Websites"
}, {
img: "https://raw.githubusercontent.com/netology-code/ra16-homeworks/master/events-state/filter/img/place200x290_2.png",
category: "Flayers"
}, {
img: "https://raw.githubusercontent.com/netology-code/ra16-homeworks/master/events-state/filter/img/the_ninetys_brand.jpg",
category: "Websites"
}, {
img: "https://raw.githubusercontent.com/netology-code/ra16-homeworks/master/events-state/filter/img/dia.jpg",
category: "Business Cards"
}, {
img: "https://raw.githubusercontent.com/netology-code/ra16-homeworks/master/events-state/filter/img/Triangle_350x197.jpg",
category: "Websites"
}, {
img: "https://raw.githubusercontent.com/netology-code/ra16-homeworks/master/events-state/filter/img/emi_haze.jpg",
category: "Websites"
}, {
img: "https://raw.githubusercontent.com/netology-code/ra16-homeworks/master/events-state/filter/img/transmission.jpg",
category: "Business Cards"
}, {
img: "https://raw.githubusercontent.com/netology-code/ra16-homeworks/master/events-state/filter/img/Triangle_350x197_1.jpg",
category: "Websites"
}, {
img: "https://raw.githubusercontent.com/netology-code/ra16-homeworks/master/events-state/filter/img/place200x290_3.png",
category: "Flayers"
}]
```