https://github.com/yuriyvyatkin/ra-hw-2.3-dropdown

ДЗ №3 к лекции «События и состояние» курса «React» Нетологии
https://github.com/yuriyvyatkin/ra-hw-2.3-dropdown

lifting-up-state reactjs usestate

Last synced: about 1 month ago
JSON representation

ДЗ №3 к лекции «События и состояние» курса «React» Нетологии

• Host: GitHub
• URL: https://github.com/yuriyvyatkin/ra-hw-2.3-dropdown
• Owner: yuriyvyatkin
• Created: 2021-10-30T06:34:07.000Z (over 3 years ago)
• Default Branch: master
• Last Pushed: 2021-10-31T02:18:11.000Z (over 3 years ago)
• Last Synced: 2024-11-09T10:19:11.618Z (3 months ago)
• Topics: lifting-up-state, reactjs, usestate
• Language: CSS
• Homepage: https://yuriyvyatkin.github.io/ra-hw-2.3-dropdown/
• Size: 419 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Домашнее задание №3 к лекции «События и состояние»

[![Build status](https://ci.appveyor.com/api/projects/status/3kkio0uev2bd31j1?svg=true)](https://ci.appveyor.com/project/yuriyvyatkin/ra-hw-2-3-dropdown)

[Ссылка на Github Pages](https://yuriyvyatkin.github.io/ra-hw-2.3-dropdown/)

Выпадающий список

===

Вам необходимо реализовать компоненты выпадающего списка.

## Описание проекта

![Выпадающий список](./assets/dropdown.png)

Реализуйте компонент `DropdownList`, аналогичный указанному на рисунке. Для позиционирования выпадающего списка воспользуйтес контейнером с `position: relatvie`. Для простоты будем считать, что размер кнопки, при нажатии на которой показывается выпадающий список - фиксированного размера (соответственно, вам не нужно через DOM API вычислять размеры и отступы).

Структура компонентов:

- `Dropdown` - содержит кнопку и `DropdownList` (внутри себя хранит состояние, показывать или нет выпадающий список)

- `DropdownList` - содержит список `DropdownItem`'ов, и хранит информацию о текущем выбранном элементе.

Вам нужно:

1. При клике на кнопку показывать и скрывать выпадающее меню

1. Отрисовывать список на базе массива, хранящегося в памяти (через `map`)

1. Подсвечивать выбранный элемент в списке (сделайте это на базе inline-стилей)

"Подглядеть" реализацию показа/сворачивания на чистом JS и CSS вы можете в исходниках, расположенных в этом же каталоге.

Вы можете реализовать данную задачу как с использованием Functional компонентов, так и на базе Class-Based компонентов.

Но мы рекомендуем Functional.