CODEWITHSUNDEEP
reactjsmobx
TRDrake
TRDrake

Reputation: 212

Multiple Steps Form in React

I was asked to develop a multi-step form in React. The form contains 30 fields to be filled and it should be displayed in 3 steps of 10 fields each. The first 2 steps have "Save" and "Next step" options to save the current work or continue with the next step. The final step has "Save" and "Finish form" options, both of them will save the form in the database (through a web service).

Something like this: enter image description here

The project is made on React, using Mobx for the state management, and I'm new to react. My question here is... how should i manage the states and the stores? Should i have a single Store (FormStore) with the 30 fields and pass it to each component through the props and they will fill each field? Is there any way i can have a single store (like a singleton) and each component fills its fields there?

I have to manage the fields information in memory untill the Save button is hit. And if when the Save button is hit, i need to save just the filled fields.

Any kind of guide will be appreciated.

Upvotes: 1

Views: 1965

Answers (1)

JulienD
JulienD

Reputation: 7293

If this form data is not changed anywhere else in your application, you can use a single store for all. I cannot think of any disadvantage given that it is relatively small.

You would want to split it if the answers could be put in different categories and different categories would be mutated by different functionalities of your app.

Upvotes: 1

Related Questions