Необходимо реализовать портфолио с фильтрами, аналогичное указанному на изображении.
Разработайте компонент класса 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"
}]