Как правильно выполнить поставленую задачу?

Question

[justfro]

Я совсем зеленый ребят так что не ругайте)
Как правильно выполнить на Реакте данный момент по архитектуре.
Есть 4 формы. Заполнил одну, нажал далее, заполнил другую нажал далее .... По итогу чего, после заполнения всех форм. на 4 шаге жмешь зарегистрироваться и все данные отправляются одним запросом.
Очень нужно ребят, помогите пожалуйста!!!

Answer 1

[Сергей Сунцев]

Довольно тривиальная задача.

Рекомендую делать через redux, но тоже самое можно делать и через обычный стейт.
Организуешь модель данных -

{
  step: 1, // текущий шаг, по умолчанию будет первый
  name: '', // и остальные поля для заполнения.
  phone: '',
  ...
}

после каждого нажатия на "далее" делаешь проверку, что текущие поля валидно заполнены и делаешь переход на следующий шаг. В зависимости от шага показываешь нужные компоненты.
На последнем шаге Отправляешь текущие заполненные данные на сервер.

Comments

[justfro]

при нажатии на следующий шаг добавить еще функцию, что бы записанные данные по клику тупо добавлять в стэйт, а потом по итогу отправить этот обьект из стейта на последнем шаге на сервер? Я просто недавно совсем в программировании)

[Сергей Сунцев]

функция одна, при нажатии на след шаг меняется только шаг.
Данные из форм в стейт должны попадать сразу, при вводе данных.

[justfro]

Сергей Сунцев, спасиб)

Answer 2

[abberati]

Посмотрите, как выполнен компонент stepper в material-ui. Или просто используйте его

Comments

[justfro]

друг, а как это сделать))))))))

[abberati]

justfro, погуглить material-ui, найти документацию, в ней найти компонент Stepper и ответы на свои вопросы.