KPC
Kevin Powell - Community•2w ago
Faisu0p

Need Help with Multi Step Form Submission - specifically handlePreviousStep Function()

Note : My Form is working perfectly fine.Also -> Form is submitting fine. Problem Description in short : When i click on Previous the data resets and old data goes away Brief Problem Description : I have been working on a multi step form.It is working fine and submitting perfectly. I wanted to add a functionality where on clicking previous button i go to previous step and edit the data if i want to , but when i click on previous the data is empty.Added handle Previous , it is working but the data is not flowing backwards.
3 Replies
Faisu0p
Faisu0pOP•2w ago
Code from Parent Page 
  const handleNextStep = (data, setter) => {
    console.log("Data from previous step:", data);
    setter(data);
    setStep(step + 1);
  };

  const handlePreviousStep = () => {
    setStep(step - 1);
  };;
  const handleNextStep = (data, setter) => {
    console.log("Data from previous step:", data);
    setter(data);
    setStep(step + 1);
  };

  const handlePreviousStep = () => {
    setStep(step - 1);
  };;
{/* Form Content */}
      <div className="project-add-form-content">
        {step === 1 && <ProjectForm onNext={(data) => handleNextStep(data, setProjectData)} onPrevious=      {handlePreviousStep} />}
        {step === 2 && <PhaseForm onNext={(data) => handleNextStep(data, setPhases)} onPrevious={handlePreviousStep} />}
        {step === 3 && <AmenityForm onNext={(data) => handleNextStep(data, setAmenities)} amenities={amenities} onPrevious={handlePreviousStep} />}
        {step === 4 && <ReviewPage data={projectData} phases={phases} amenities={amenities} onSubmit={handleSubmit} />} {/* Pass handleSubmit to ReviewPage */}
      </div>
{/* Form Content */}
      <div className="project-add-form-content">
        {step === 1 && <ProjectForm onNext={(data) => handleNextStep(data, setProjectData)} onPrevious=      {handlePreviousStep} />}
        {step === 2 && <PhaseForm onNext={(data) => handleNextStep(data, setPhases)} onPrevious={handlePreviousStep} />}
        {step === 3 && <AmenityForm onNext={(data) => handleNextStep(data, setAmenities)} amenities={amenities} onPrevious={handlePreviousStep} />}
        {step === 4 && <ReviewPage data={projectData} phases={phases} amenities={amenities} onSubmit={handleSubmit} />} {/* Pass handleSubmit to ReviewPage */}
      </div>
~MARSMAN~
~MARSMAN~•2w ago
And if you go back from a previous step to the current step again, you will lose all the data you entered. It's because you're re-rendering/rendering each step conditionally. So going to the next step will cause the previous one to unmount and thus the data it had will be removed. I have 2 ideas in mind to fix this: 1- Pass the projectData as a prop to each step, and then fill that step's form inputs values based on their name and the corresponding key in projectData. 2- if you're just wanting to make it multi step form mainly for the UX, then I suggest you to use CSS display: none; to hide the steps, and only display the current step. Maybe add a class of "active" when a step is the current one. I'd do something like: 
<Step active={step === 3} />
<Step active={step === 3} />
And then pass that active prop to: 
<div className={`active ? Styles.show : "" `}>

</div>
<div className={`active ? Styles.show : "" `}>

</div>
Faisu0p
Faisu0pOP•2w ago
Thanks for Help to Nobody ,,,, i fixed it myself

Did you find this page helpful?