import React from 'react'; import { useDispatch } from 'react-redux'; import { IFormData } from 'components/molecules/MultiStepForm/MultiStep.model'; import MultiStepForm from 'components/molecules/MultiStepForm'; import reducer from 'redux/reducers/multiStepExample'; import Step1 from './Step1'; import Step2 from './Step2'; import Step3 from './Step3'; const ExampleForm = (): JSX.Element => { const dispatch = useDispatch(); const { updateForm, clearForm } = reducer.actions; const handleSubmit = (formData: IFormData) => { console.log('formData', formData); }; const handleNext = (formData: IFormData) => { dispatch(updateForm(formData)); }; const handleBack = (formData: IFormData) => { dispatch(updateForm(formData)); }; const handleCancel = () => { dispatch(clearForm()); }; return ( <MultiStepForm title="Example Form" onCancel={handleCancel} onSubmit={handleSubmit} onNext={handleNext} onBack={handleBack} > <Step1 /> <Step2 /> <Step3 /> </MultiStepForm> ); }; export default ExampleForm;