Необходимо реализовать портфолио с фильтрами, аналогичное указанному на изображении.
Разработайте компонент класса Portfolio, хранящий список фильтров, активный фильтр, а также список проектов.
Сами фильтры отображаются в компоненте без состояния Toolbar, которому от Portfolio мы передаём три свойства:
filters— список фильтров, название которых совпадает с категориями проектов;selected— активный фильтр;onSelectFilter(filter)— обработчик события, который реагирует на выбор пользователем одного из фильтров, обработчик принимает один аргумент — строку с названием фильтра.
Пример:
<Toolbar
filters={["All", "Websites", "Flayers", "Business Cards"]}
selected="All"
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.
Набор данных для отображения:
[{
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"
}]
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent