Multi Step Form Handling using React and Django Rest Framework

Question

I have a three step form to add a story in database

When user fills the step one form, all the step one data will be added to the story table and the user will be redirected to step two. I have written three views for step one, two, three.

My question is how should i manage step two view and step three view? How should i update the story in step two and step three? Should i send id back to front end and store it in redux? And then send that id to the backend for step two and step three?

Also how should i reuse this form in react for update?

I can provide more details if want

Answer 1

I believe there is no "fits all" solution, but in general your thoughts are correct. If there is data that backend knows and your frontend doesn't, you send it back as a response. So this would be like this:

1. Send form to backend
2. Backend responses with either "OK" plus the data frontend needs to know about, or with errors if something went wrong
3. Proceed to next step and to 1 until finished

You can also just store all the data from all three steps on frontend and then send it in one piece - in this case you don't end up with partially filled data in DB, but then you will have to think about navigation to errored fields/steps if something will go wrong and it will complicate things.

As to components reuse I have opinion: if you can keep component maintainable and replaceable - reuse it.

Edit: If you are using react you might not need to redirect user via backend, but only switch step via react (either with client-side router or with plain "step" value in state), depending on your needs.