Pass closeModal from one component to other with react - reactjs

Question

Hi i am trying to close a modal box from another component. I have a component with a list and other with a form.
The error that i get is:
Unhandled Rejection (TypeError): _this2.closeModal is not a function
The List file with the modal commands has:
closeModal = () => this.setState({ isOpen: false });
render() {
const { closeModal } = this.state
...
<Modal show={this.state.isOpen} onHide={this.closeModal}>
<Modal.Header closeButton>
<Modal.Title>Adicionar / Editar</Modal.Title>
</Modal.Header>
<Modal.Body>
<CategoryForm
id={this.state.id || null}
closeModal={closeModal}
/>
</Modal.Body>
<Modal.Footer>
<Button variant="secondary" onClick={this.closeModal}>
Close
</Button>
</Modal.Footer>
</Modal>
</>
// some code
}
the file with form, that will close the modal after saving info in the database is
class CategoryForm extends Component {
constructor(props) {
super(props)
this.state = {
closeModal: props.closeModal
}
}
handleSubmit(event) {
event.preventDefault()
let category = {
title: this.state.category.title,
}
Api.saveCategory(category, this.state.category.id)
.then(response => {
const [error, errors] = response
if (error) {
this.setState({
errors: errors
})
} else {
this.setState(
this.closeModal()
)
}
})
}
//some code
render() {
<Form onSubmit={this.handleSubmit} >
<FormGroup>
<Label for="title">Title</Label>
<Input type="text" name="title" id="title" value={category.title} placeholder="Enter title" onChange={this.setTitle} />
</FormGroup>
<FormGroup>
<Label for="slug">Slug</Label>
<Input type="text" name="slug" id="slug" value={category.slug} placeholder="Enter slug" onChange={this.setSlug} />
</FormGroup>
<Button color="success">Submit</Button>
</Form>
}

Answer 1

In the list file create a command that call the function close modal:
closeModal = () => this.setState({ isOpen: false });
addCategory() {
this.closeModal()
}
render() {
...
<Modal show={this.state.isOpen} onHide={this.closeModal}>
<Modal.Header closeButton>
<Modal.Title>Adicionar / Editar</Modal.Title>
</Modal.Header>
<Modal.Body>
<CategoryForm
id={this.state.id || null}
addCategory={this.addCategory}
/>
</Modal.Body>
<Modal.Footer>
<Button variant="secondary" onClick={this.closeModal}>
Close
</Button>
</Modal.Footer>
</Modal>
</>
// some code
}
In the form, props the function at the handleSubmit:
handleSubmit(event) {
event.preventDefault()
let category = {
title: this.state.category.title,
slug: this.state.category.slug,
}
Api.saveCategory(category, this.state.category.id)
.then(response => {
const [error, errors] = response
if (error) {
this.setState({
errors: errors
})
} else {
this.setState(
)
}
})
const form = event.target;
this.props.addCategory( id, slug, title);
form.reset();
}