I have a multistep form which contains different objects that I pass them to the final step (submit form). At a point on my multistep form there is a card list selection where user has to select a specific card in order to move to the next step and has to fill out a form based on card selection (see picture bellow). After the form is filled user moves to the last step which is review form and submit. On my review submit step I have created an accordion which will show user details, card selection and completed form. My problem is how do I pass the selected card form to the review and submit screen.
Also is there a better way to improve my multistep form validation and performance?
See code and pictures bellow for a better understanding of my problem!
const PatientProfileForm = (props) => {
const [patientForm, setPatientForm] = useState(patientDetails)
const [aContraindications, setAcontraindications] = useState(absoluteContraindications)
const [rContraindications, setRcontraindications] = useState(relativeContraindications)
const [treatmentCard, setTreatmentCard] = useState('');
const [bloomeaForm, setBloomeaForm] = useState(bloomea);
const [botoxForm, setBotoxForm] = useState(botox)
const [dmForm, setDmForm] = useState(dermalFillers);
const [hifuForm, setHifuForm] = useState(hifu);
const [rfForm, setRfForm] = useState(radioFrequenqy);
const [reviewForm, setReviewForm] = useState(reviewAndSubmit);
const [reviewTreatmentForm, setReviewTreatmentForm] = useState();
const [index, setIndex] = useState(0);
const screenDisplay = () => {
if (index === 0) {
return <PatientProfile patientForm={patientForm} setPatientForm={setPatientForm} />
} else if (index === 1) {
if (isEmpty(patientForm.name) || isEmpty(patientForm.email) || isEmpty(patientForm.gender) || isEmpty(patientForm.dob) || isEmpty(patientForm.phoneNo) || isEmpty(patientForm.address) || isEmpty(patientForm.city) || isEmpty(patientForm.county) || isEmpty(patientForm.postCode)) {
Alert.alert('Please fill in all fields!')
setIndex((index) => index - 1);
return
}
if (!isEmail(patientForm.email)) {
Alert.alert('Please enter a valid email ')
setIndex((index) => index - 1);
return
}
return <AbsoluteContraIndications aContraindications={aContraindications} setAcontraindications={setAcontraindications} />
} else if (index === 2) {
if (isEmpty(aContraindications.accutane) || isEmpty(aContraindications.allergicToAspiring) || isEmpty(aContraindications.allergies) || isEmpty(aContraindications.coldSore) || isEmpty(aContraindications.pregnant) || isEmpty(aContraindications.skinInfection)) {
Alert.alert('Please fill in all fields!')
setIndex((index) => index - 1);
return
}
return <RelativeContraIndications rContraindications={rContraindications} setRcontraindications={setRcontraindications} />
} else if (index === 3) {
if (isEmpty(rContraindications.aerobicPhysicalActivity) || isEmpty(rContraindications.ahaBhaSkincareProducts) || isEmpty(rContraindications.botoxOrDermalFiller) ||
isEmpty(rContraindications.chemicalOrEnzymePeel) || isEmpty(rContraindications.contactLenses) || isEmpty(rContraindications.dermaplanTreatment) ||
isEmpty(rContraindications.everHadColdSore) || isEmpty(rContraindications.exposedToSun) || isEmpty(rContraindications.laserHairRemoval) ||
isEmpty(rContraindications.microdermabrasion) || isEmpty(rContraindications.permanentMakeup) || isEmpty(rContraindications.photofacialTreatment) ||
isEmpty(rContraindications.prescriptionRetinoids) || isEmpty(rContraindications.rfSkinTightening) || isEmpty(rContraindications.skincareProductsAdverseReactions) ||
isEmpty(rContraindications.sunlessTanningProducts) || isEmpty(rContraindications.topicalMedicationPrescription) ||
isEmpty(rContraindications.waxingThreadingOther) || isEmpty(rContraindications.medicalIssues)) {
Alert.alert('Please fill in all fields!')
setIndex((index) => index - 1);
return
}
return <TreatmentsCard treatmentCard={treatmentCard} setTreatmentCard={setTreatmentCard} />
} else if (index === 4) {
if (isEmpty(treatmentCard)) {
Alert.alert('Please select the treatment you booked in for!')
setIndex((index) => index - 1);
return
}
if (treatmentCard.treatmentCard === 'bloomea') return <BloomeaForm bloomeaForm={bloomeaForm} setBloomeaForm={setBloomeaForm} />
if (treatmentCard.treatmentCard === 'botox') return <BotoxForm botoxForm={botoxForm} setBotoxForm={setBotoxForm} />
if (treatmentCard.treatmentCard === 'dermal-fillers') return <DermalFillersForm dmForm={dmForm} setDmForm={setDmForm} />
if (treatmentCard.treatmentCard === 'hifu') return <HiFuForm hifuForm={hifuForm} setHifuForm={setHifuForm} />
if (treatmentCard.treatmentCard === 'micro-needling') return <MicroNeedling />
if (treatmentCard.treatmentCard === 'radio-frequenqy') return <RadioFrequency rfForm={rfForm} setRfForm={setRfForm} />
if (treatmentCard.treatmentCard === 'threads-lift') return <ThreadsLift />
} else {
return <ReviewAndSubmit
patientForm={patientForm}
aContraindications={aContraindications}
rContraindications={rContraindications}
treatmentCard={treatmentCard}
bloomeaForm={bloomeaForm}
reviewForm={reviewForm}
setReviewForm={setReviewForm}
/>
}
}
return (
<Block style={styles.container}>
<Block flex={1} style={[styles.bottomSection, styles.shadow]}>
<Block style={styles.btnContainer}>
<Pressable
// disabled={index === 0}
onPress={() => { setIndex((index) => index - 1) }}
>
{index === 0 ? (
<Text></Text>
) : (
<Text style={styles.btn}>
<AntDesign name='doubleleft' size={18} color={nowTheme.COLORS.ACTIVE} /> Previous</Text>
)}
</Pressable>
<Pressable
onPress={() => setIndex((index) => index + 1)}
>
{index < 5 ? (
<Text style={styles.btn}>Next <AntDesign name='doubleright' size={18} color={nowTheme.COLORS.ACTIVE} /></Text>
) : ''}
</Pressable>
</Block>
<Block style={{ margin: 15 }}>{screenDisplay()}</Block>
</Block>
</Block >
)
}
export default PatientProfileForm;
Card Selection Review and Submit
I tried to create a useState hook and set the object with the selected form but it gives me an error. Any help much appreciated
