Hi,
I have a parent component A with a form which contains a configurable section with a child component B. I am trying to pass props to the child, one is a string called visitUuid which gets updated when a visit is created successfully and the handleSubmit event which is called on submitting the parent component and should be used to handle submitting the child component values to a different api. I can see my visitUuid prop but the handleSubmit does submit values in the child component. On logging it, i can see its contents. Any advise or useful links on how to use one submit handler for a parent and child will be appreciated.
My Parent Component :
interface VisitFormProps {
patientUuid: string;
closePanel: () => void;
}
const StartVisitForm: React.FC<VisitFormProps> = ({ patientUuid, closePanel }) => {
const handleSubmit = useCallback(
(event) => {
event.preventDefault();
const payload: NewVisitPayload = {};
const abortController = new AbortController();
saveVisit(payload, abortController)
.pipe(first())
.subscribe(
(response) => {
if (response.status === 201) { setVisitUuid(response.data.uuid); showToast(); }
},
(error) => { showNotification() },
);
},
[],
);
const patientState = useMemo(
() => ({ patientUuid, visitUuid, handleSubmit }),
[patientUuid, visitUuid, handleSubmit],
);
const handleOnChange = () => {
setIgnoreChanges((prevState) => !prevState);
};
return (
<Form className={styles.form} onChange={handleOnChange}>
<div>
<TextInput
className={styles.input}
id="middleName"
labelText={t('middleName', 'Middle name')}
onChange={(event) => setMiddleName(event.target.value)}
value={middleName}
/>
<ExtensionSlot className={styles.content} extensionSlotName="add-queue-entry-slot" state={patientState} /> // child component
</div>
<Button onClick={handleSubmit} className={styles.button} kind="primary" type="submit">
{t('startVisit', 'Start visit')}
</Button>
</Form>
);
};
export default StartVisitForm;
My Child Component:
interface StartVisitQueueFieldsProps {
patientUuid: string;
visitUuid: string;
handleSubmit: (event) => void;
}
const StartVisitQueueFields: React.FC<StartVisitQueueFieldsProps> = ({ patientUuid, visitUuid, handleSubmit }) => {
// to add queue entry if visit is not empty
// check visit form event
handleSubmit = (evt) => {
evt.preventDefault();
const queuePayload: QueueEntryPayload = {};
console.log("im almost submitting!")
if (visitUuid !== undefined) {
console.log('im here', visitUuid);
saveQueueEntry(queuePayload, abortController)
.pipe(first())
.subscribe(
(response) => {
if (response.status === 201) { showToast();}
},
(error) => { showNotification();},
);
}
};
return (
<Form className={styles.form} onSubmit={handleSubmit}>
<section className={styles.section}>
<div className={styles.sectionTitle}>{t('queueLocation', 'Queue Location')}</div>
<Layer>
<Select
labelText={t('selectQueueLocation', 'Select a queue location')}
id="location"
invalidText="Required"
value={selectedQueueLocation}
onChange={(event) => setSelectedQueueLocation(event.target.value)}>
</Select>
</Layer>
</Form>
);
};
export default StartVisitQueueFields;