Вам необходимо реализовать компоненты выпадающего списка.
Реализуйте компонент DropdownList, аналогичный указанному на рисунке. Для позиционирования выпадающего списка воспользуйтес контейнером с position: relatvie. Для простоты будем считать, что размер кнопки, при нажатии на которой показывается выпадающий список - фиксированного размера (соответственно, вам не нужно через DOM API вычислять размеры и отступы).
Структура компонентов:
Dropdown- содержит кнопку иDropdownList(внутри себя хранит состояние, показывать или нет выпадающий список)DropdownList- содержит списокDropdownItem'ов, и хранит информацию о текущем выбранном элементе.
Вам нужно:
- При клике на кнопку показывать и скрывать выпадающее меню
- Отрисовывать список на базе массива, хранящегося в памяти (через
map) - Подсвечивать выбранный элемент в списке (сделайте это на базе inline-стилей)
"Подглядеть" реализацию показа/сворачивания на чистом JS и CSS вы можете в исходниках, расположенных в этом же каталоге.
Вы можете реализовать данную задачу как с использованием Functional компонентов, так и на базе Class-Based компонентов.
Но мы рекомендуем Functional.