If i have the following dialog/modal:

```
<Modal
                open={this.state.createAccountModalOpen}
                trigger={<Link size="m" theme="bare" href="#" className="main-menu-item" onClick={this.handleOpenModalCreateAccount}>Create account</Link>}
                closeIcon
                onClose={() => { this.setState({
                    createAccountModalOpen: false,
                }); }}
            >
                <Header icon='add user' content='Create account' />
                <Modal.Content>
                    <Form />
                </Modal.Content>
                <Modal.Actions>
                    <Button color='green' onClick={this.handleSubmit}>
                        <Icon name='add user' /> Create account
                    </Button>
                </Modal.Actions>
            </Modal>

```

Basically this is a React Semantic-ui Modal/Dialog. Now What i want to do is make Form reusable (the Form component contains 4 input fields), so i can use it in other modals or components. What would be the best way so that when I click on Create account, it gathers the data from the form and then submits it?

Do I have to pass functions to the Form to try store the data in the main Modal component? or is there a better way to get the validated data from the form?