Приложение Todo List App и создатель цветных коробок | День 13 и 14

Я создал 2 приложения React

1) Todo List
2) Color Box Maker

Список дел

Компоненты

  • App — этот компонент должен отображать компонент TodoList

  • TodoList — этот компонент должен вывести компонент NewTodoForm и вывести список Todo. Поместите ваше состояние, содержащее все Todo, в этот компонент.

  • NewTodoForm — этот компонент должен отображать форму с одним текстовым вводом для создаваемой задачи. Когда эта форма будет отправлена, должен быть создан новый компонент Todo.

  • Todo- этот компонент должен отображать div с задачей todo.

Для каждого компонента Todo также должна быть кнопка с текстом «X», которая при нажатии удаляет задачу.

Каждый компонент Todo также должен отображать кнопку с текстом «edit», которая при нажатии отображает форму с задачей todo в качестве входных данных и кнопку для отправки формы. Когда форма отправлена, задача тодо должна быть обновлена, а форма должна быть скрыта.

https://github.com/Developer-io-web/Todo-list

Color-Box Maker

https://github.com/Developer-io-web/Color-Box-Maker

Компоненты

  • App — этот компонент должен выводить компонент BoxList.
  • BoxList — поместите сюда ваше состояние, содержащее все коробки. Этот компонент должен отобразить все компоненты Box вместе с компонентом NewBoxForm.
  • Box- этот компонент должен отобразить div с цветом фона, шириной и высотой на основе переданных ему реквизитов. NewBoxForm — этот компонент должен отобразить форму, которая при отправке создает новый Box. Вы должны иметь возможность указать ширину, высоту и цвет фона бокса. Когда форма будет отправлена, очистите значения ввода.

Когда каждый компонент Box отображается, добавьте кнопку с текстом «X» рядом с каждым Box. Когда эта кнопка будет нажата, удалите этот конкретный блок. Для этого потребуется передать функцию в качестве реквизита — кнопка не должна быть отдельным компонентом, она должна быть включена в компонент Box.

Оставьте комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *