title: Reusable form fields in React
body: <p>If i have the following dialog/modal:</p>
  
  <pre><code>&lt;Modal
                  open={this.state.createAccountModalOpen}
                  trigger={&lt;Link size="m" theme="bare" href="#" className="main-menu-item" onClick={this.handleOpenModalCreateAccount}&gt;Create account&lt;/Link&gt;}
                  closeIcon
                  onClose={() =&gt; { this.setState({
                      createAccountModalOpen: false,
                  }); }}
              &gt;
                  &lt;Header icon='add user' content='Create account' /&gt;
                  &lt;Modal.Content&gt;
                      &lt;Form /&gt;
                  &lt;/Modal.Content&gt;
                  &lt;Modal.Actions&gt;
                      &lt;Button color='green' onClick={this.handleSubmit}&gt;
                          &lt;Icon name='add user' /&gt; Create account
                      &lt;/Button&gt;
                  &lt;/Modal.Actions&gt;
              &lt;/Modal&gt;
  </code></pre>
  
  <p>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?</p>
  
  <p>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?</p>