import React, { useState } from "react";
import { FaAngleLeft, FaAngleRight, FaRegPaperPlane } from
"react-icons/fa6";
import { FileUpload, ParentInfo, StudentInfo } from "..";
import "./multistepForm.css";
const MultistepForm = () => {
const [step, setStep] = useState(0);
const [formData, setFormData] = useState({
stdName: "",
stdMiddleName: "",
stdSurname: "",
stdGender: "",
stdPOB: "",
stdDOB: "",
fatherName: "",
motherName: "",
gradeLevel: "",
grade: "",
// Parent Info
prtName: "",
prtMiddleName: "",
prtSurname: "",
prtNational: "",
prtCountry: "",
prtState: "",
prtCity: "",
prtEmail: "",
prtPhone: "",
prtIDType: "",
prtIDNum: "",
// Files
prtIDImg: "",
stdTranscript: "",
stdImg: "",
});
function next() {
setStep((i) => {
if (i >= FormHeaders.length - 1) return i;
return i + 1;
});
}
function back() {
setStep((i) => {
if (i <= 0) return i;
return i - 1;
});
}
function onSubmit(e: FormEvent) {
e.preventDefault();
if (step !== FormHeaders.length - 1) return next();
alert("Submission completed");
}
const FormHeaders = [
"Student Information",
"Parent Information",
"Upload Files",
];
const StepDisplay = () => {
if (step === 0) {
return <StudentInfo formData={formData} setFormData=
{setFormData} />;
} else if (step === 1) {
return <ParentInfo formData={formData} setFormData=
{setFormData} />;
} else {
return <FileUpload formData={formData} setFormData=
{setFormData} />;
}
};
return (
<div className="form">
<h2 className="form-title">Online Application</h2>
<div className="progressbar">
<div
style={{
width: step === 0 ? "33.3%" : step === 1 ? "66.6%" :
"100%",
}}
></div>
</div>
<div className="form-container">
<h1 className="form-header">{FormHeaders[step]}</h1>
<div className="form-body">
<form onSubmit={onSubmit} action="#">
{StepDisplay()}
<div className="form-footer">
{step !== 0 &&
<button className="form-btn btn" onClick={back}>
<FaAngleLeft />
</button>
}
<button className="form-btn btn" type="submit">
{step === FormHeaders.length - 1 ? (
<i>
<FaRegPaperPlane />
</i>
) : (
<i>
<FaAngleRight />
</i>
)}
</button>
</div>
</form>
</div>
</div>
</div>
);
};
export default MultistepForm;
I am building a multistep form with ReactJS and Vanilla JS and I ran into a problem with my Back button. The form has 3 pages and the back button works fine until I get to the last page, I cannot go back anymore (On page 2, I can still go back to page 1, but once I get to page 3, I cannot go back to page 2 as the back button stops working).
It does not display any error.
I have tried multiple ways to define the back function, but the problem is still the same.
It was working perfectly fine, until I added the onSubmit function (I am not very sure about it).
2
Answers
maybe simplify a bit.
a switch statement might be a good idea for step display
combine all your step logic into one function
so your submit would now look like
finally add your new functions to your render
Your back button does not have a
typeattribute and when clicked, will implicitly submit the form, causing theonSubmit()function to fire. So on page 3, thestepvalue is set to1inback()but thennext()is called inonSubmit(), causing the value to go back to2straight away, making it seem like nothing happened.To fix this, you could consider setting
type="button"on the back<button>so that it does not cause a form submission: