title: Sending FormData from modal to parent component's method in react
body: <p>I have a problem calling parent method - HandleInsert(formData) with the "formData" argument being made on the child component. </p>
  
  <p><strong>On the parent component (relevant code)</strong></p>
  
  <pre><code>addModalClose = () =&gt; {
          this.setState( {
              addModalShow : false
          });
      }
  
      addModalOpen = () =&gt; {
          this.setState( {
              addModalShow : true
          });
  }
  
  async HandleDelete(id : string) {
          this.setState({
              tickets: await api.deleteTickets(id)
          })
      }
  
  
  and I update props of Modal here:
  
  &lt;Button id="button" className="add_ticket" onClick={this.addModalOpen}&gt;New Ticket&lt;/Button&gt;
                          {/*define new props for Modal component in parent component*/}
                          &lt;AddModal
                              show={this.state.addModalShow}
                              onHide={this.addModalClose}
                              onSubmit={this.HandleInsert}
                          /&gt;
  
  </code></pre>
  
  <p><strong>On the child component: (the modal itself)</strong></p>
  
  <pre><code>import React, {Component} from 'react'
  import {Modal, Button, Row, Col, Form} from 'react-bootstrap';
  import {App} from './App'
  
  export class AddModal extends Component {
      constructor(props) {
          super(props);
          this.state = {
              email : "",
              title : "",
              content : ""
          }
      }
  
  
      onHide;
      onSubmit;
  
      handleEmailChange = e =&gt; {
          this.setState({email: e.target.value});
      };
      handleTitleChange = e  =&gt; {
          this.setState({title: e.target.value});
      };
      handleContentChange = e =&gt; {
          this.setState({content: e.target.value});
      };
  
  
  
      render(){
          let formData = new FormData();
          return(
              &lt;Modal
                  {...this.props}
                  size="lg"
                  aria-labelledby="contained-modal-title-vcenter"
                  centered
              &gt;
                  &lt;Modal.Header closeButton&gt;
                      &lt;Modal.Title id="contained-modal-title-vcenter"&gt;
                          Ticket Details:
                      &lt;/Modal.Title&gt;
                  &lt;/Modal.Header&gt;
  
                  &lt;Modal.Body&gt;
                      &lt;Form&gt;
                          &lt;Form.Group controlId="exampleForm.ControlInput1" &gt;
                              &lt;Form.Label&gt;Email:&lt;/Form.Label&gt;
                              &lt;Form.Control type="email" placeholder="name@example.com" value={this.state.email} onChange={this.handleEmailChange}/&gt;
                          &lt;/Form.Group&gt;
                          &lt;Form.Group controlId="exampleForm.ControlInput2"&gt;
                              &lt;Form.Label&gt;Title:&lt;/Form.Label&gt;
                              &lt;Form.Control type="title" value={this.state.title} onChange={this.handleTitleChange}/&gt;
                          &lt;/Form.Group&gt;
                          &lt;Form.Group controlId="exampleForm.ControlTextarea1"&gt;
                              &lt;Form.Label&gt;Content:&lt;/Form.Label&gt;
                              &lt;Form.Control as="textarea" rows="3" value={this.state.content} onChange={this.handleContentChange}/&gt;
                          &lt;/Form.Group&gt;
                      &lt;/Form&gt;
                  &lt;/Modal.Body&gt;
  
                  { formData.append("id", "bded4175-a519-5dee-abed-014e7242e6f0")}
                  { formData.append("title", this.state.title)}
                  { formData.append("content", this.state.content)}
                  { formData.append("userEmail",this.state.email)}
                  { formData.append("creationTime", new Date())}
  
  &lt;Modal.Footer&gt;
                      &lt;Button variant="success" onClick={() =&gt; this.props.onSubmit(formData)}&gt;Create&lt;/Button&gt;
                      &lt;Button variant="danger" onClick={this.props.onHide}&gt;Close&lt;/Button&gt;
                  &lt;/Modal.Footer&gt;
              &lt;/Modal&gt;
          );
      }
  }
  </code></pre>
  
  <p>the error I'm getting is this:
  where it wont understand that it's a function.. 
  how I define parent/child relationship? it's not enough just calling component from one compoenent to another? </p>
  
  <p>I'm new on react so I don't get quite well those notions.</p>
  
  <p><a href="https://i.stack.imgur.com/4OltE.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4OltE.png" alt="enter image description here"></a></p>