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