@Sarah-okolo
Posted
Hi, I believe you are having trouble managing state because you are treating the form as multi-page rather than a single-page multistep form.
This approach is also what is affecting your site's URL where if it is reloaded in a certain step the page becomes non-existent resulting in a 404 error, and also what causes the resetting of all the data when the user decides to go back a step. I mean, it's not really a multistep form if the user's data keeps resetting from step to step.
You are already using React, whose main feature is to dynamically update changes to the UI without reloading the site, so my advice is to remove the routing, make the form a single page, create a component for each step, and simply display the component for the corresponding step as the user moves back or forth in the form.
You can then manage the values from each component by setting them in state and passing them through context. I hope you find this helpful.
