Sending FormData from modal to parent component's method in react

Question

I have a problem calling parent method - HandleInsert(formData) with the "formData" argument being made on the child component.

On the parent component (relevant code)

addModalClose = () => {
        this.setState( {
            addModalShow : false
        });
    }

    addModalOpen = () => {
        this.setState( {
            addModalShow : true
        });
}

async HandleDelete(id : string) {
        this.setState({
            tickets: await api.deleteTickets(id)
        })
    }


and I update props of Modal here:

<Button id="button" className="add_ticket" onClick={this.addModalOpen}>New Ticket</Button>
                        {/*define new props for Modal component in parent component*/}
                        <AddModal
                            show={this.state.addModalShow}
                            onHide={this.addModalClose}
                            onSubmit={this.HandleInsert}
                        />

On the child component: (the modal itself)

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 => {
        this.setState({email: e.target.value});
    };
    handleTitleChange = e  => {
        this.setState({title: e.target.value});
    };
    handleContentChange = e => {
        this.setState({content: e.target.value});
    };



    render(){
        let formData = new FormData();
        return(
            <Modal
                {...this.props}
                size="lg"
                aria-labelledby="contained-modal-title-vcenter"
                centered
            >
                <Modal.Header closeButton>
                    <Modal.Title id="contained-modal-title-vcenter">
                        Ticket Details:
                    </Modal.Title>
                </Modal.Header>

                <Modal.Body>
                    <Form>
                        <Form.Group controlId="exampleForm.ControlInput1" >
                            <Form.Label>Email:</Form.Label>
                            <Form.Control type="email" placeholder="name@example.com" value={this.state.email} onChange={this.handleEmailChange}/>
                        </Form.Group>
                        <Form.Group controlId="exampleForm.ControlInput2">
                            <Form.Label>Title:</Form.Label>
                            <Form.Control type="title" value={this.state.title} onChange={this.handleTitleChange}/>
                        </Form.Group>
                        <Form.Group controlId="exampleForm.ControlTextarea1">
                            <Form.Label>Content:</Form.Label>
                            <Form.Control as="textarea" rows="3" value={this.state.content} onChange={this.handleContentChange}/>
                        </Form.Group>
                    </Form>
                </Modal.Body>

                { 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())}

<Modal.Footer>
                    <Button variant="success" onClick={() => this.props.onSubmit(formData)}>Create</Button>
                    <Button variant="danger" onClick={this.props.onHide}>Close</Button>
                </Modal.Footer>
            </Modal>
        );
    }
}

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?

I'm new on react so I don't get quite well those notions.

Answer 1

you are doing this wrong

onCreate(formData)={this.HandleInsert(formData)}

this is should be assing like

    onCreate={(formData)=>{this.HandleInsert(formData)}}

updated answer

1.where is HandleInsert is defined in parent component???

<Button id="button" className="add_ticket" onClick={this.addModalOpen}>New 
 Ticket</Button>
            <AddModal
            show={this.state.addModalShow}
            onHide={this.addModalClose}
            onSubmit={this.HandleInsert}
            />

2.your child component is may not receiving HandleInsert from parent component as props. 3.as i can see in current code

 <Modal.Footer>
     <Button variant="success" onClick={this.props.HandleInsert(formData)}>Create</Button>
     <Button variant="danger" onClick={this.props.onHide}>Close</Button>
 </Modal.Footer>

you are calling handleInsert again in wrong way it should be like

 onClick={()=>{this.props.HandleInser(formData)}}

another thing is where FormData is defined or imported in your code??