Medium
You're building a multi-step form wizard in React that needs to maintain state between steps and handle navigation. What's missing in this implementation?
1function FormWizard({ onSubmit, steps }) {2 const [currentStep, setCurrentStep] = useState(0);3 const [formData, setFormData] = useState({});45 const handleStepComplete = (stepData) => {6 // Missing implementation7 _______________8 };910 const handleBack = () => {11 if (currentStep > 0) {12 setCurrentStep(current => current - 1);13 }14 };1516 const CurrentStepComponent = steps[currentStep].component;1718 return (19 <div className="wizard">20 <div className="wizard-progress">21 {steps.map((step, index) => (22 <div23 key={step.id}24 className={`step ${index <= currentStep ? 'active' : ''}`}25 >26 {step.label}27 </div>28 ))}29 </div>3031 <CurrentStepComponent32 data={formData}33 onComplete={handleStepComplete}34 />3536 <div className="wizard-controls">37 {currentStep > 0 && (38 <button onClick={handleBack}>Back</button>39 )}40 </div>41 </div>42 );43}