a-rusak / lesson-4-tests

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Homework 4

Скопируйте этот репозиторий.

Пример работы.

Задачи:

  1. Создать компонент Switcher, который рендерит только одного ребенка, а так же показывает список имен всех детей, и если кликнуть на имя одного из детей — компонент покажет другого ребенка.
  2. Создать компонент CardNumberHolder который будет хранить номер карты и рендерить компонент CardNumberInput.
  3. Создать компонент CardNumberInput, который будет возвращать input и форматировать его значение при вводе, расставляя пробелы после каждого 4 символа, и нормализовать значение удаляя пробелы, при измении и передавая нормализованную строку в props.onChange.
  4. Создать компонент ModalButton, который выводит кнопку, при нажатии на которую появляется модальное окно, которое должно быть отрендерено в #modal. В модальном окне должна быть кнопка закрытия окна, при нажатии на которую окно закрывается.
  5. Тесты должны исполнятся.

Для установления имени у компоненты используйте static displayName = 'Name'. Для работы с детьми нужно использовать методы React.Children.map и React.Children.toArray. Модальное окно нужно выводить с помощью порталов.

About


Languages

Language:JavaScript 83.3%Language:HTML 9.5%Language:CSS 7.2%