React - Form submit button in parent Modal - reactjs

Question

I have a Semantic UI Form:
import {Form} from 'semantic-ui-react';
<MyForm>
<Form onSubmit={_handleSubmit}>
<Form.Input name="myInput" label="My Label" value="" />
<Form.Group>
<Form.Button>Submit</Form.Button>
</Form.Group>
</Form>
</MyForm>
This form can be displayed inside a modal, or directly in a standard view in my app
My modal looks like this:
import {Button, Modal} from 'semantic-ui-react';
<Modal open={true} size="large" centered>
<Modal.Header>My Label</Modal.Header>
<Modal.Content>
<MyForm />
</Modal.Content>
<Modal.Actions>
<Button className="close-button">Cancel</Button>
{/* Insert submit button here*/}
</Modal.Actions>
</Modal>
This simple approach is working.
What I would like to do, is to have the submit button inside the Modal.Actions section when it's displayed in a modal, and keep it right after the input otherwise.
I don't know how to tell my form that the submit button is somewhere in its parent.

Answer 1

I finally managed to do it using a ref.
The idea is to create a ref in the form, pointing to the submit function and having a function in props to transmit this ref to my modal.
Modal:
import {Button, Modal} from 'semantic-ui-react';
const [submitFunc, setSubmitFunc] = useState();
const submitForm = () => {
if (submitFunc) {
submitFunc.current();
}
};
<Modal open={true} size="large" centered>
<Modal.Header>My Label</Modal.Header>
<Modal.Content>
<MyForm setSubmitFunc={setSubmitFunc} />
</Modal.Content>
<Modal.Actions>
<Button>Cancel</Button>
<Button onClick={submitForm}>Submit</Button>
</Modal.Actions>
</Modal>
Form:
function EditRecordForm({setSubmitFunc}) {
const submitRef = useRef(null);
useEffect(() => {
if (!!setSubmitFunc) {
setSubmitFunc(submitRef);
}
});
const handleSubmit = () => {
// Do whatever you need to retrieve form values and submit it
}
submitRef.current = handleSubmit;
return (
<MyForm>
<Form onSubmit={_handleSubmit}>
<Form.Input name="myInput" label="My Label" value="" />
<Form.Group>
<Form.Button>Submit</Form.Button>
</Form.Group>
</Form>
</MyForm>
)
}

Answer 2

What you can do is, you can associate the form with the button in the modal actions using a form id. Here is how you do it :-
Form:
<MyForm>
<Form id={'my-form'} onSubmit={_handleSubmit}>
{/*Form Elements}
</Form>
</MyForm>
Modal:
<Modal.Actions>
<Button>Cancel</Button>
<Button type={'submit'} form={'my-form'}>Submit</Button>
</Modal.Actions>
Following link is the tweet by the creator of chakr-ui telling the same method to join the form in a side drawer which needs to be connected to the button in the drawer footer.
https://twitter.com/thesegunadebayo/status/1330866834636201987?lang=en