React with Antd Component Modal Form with state issue

Question

I can't figure out what is the right way to handle this -> I am beginner in React , so if this looks absurd, maybe I got this wrong.

I have a React component - which is a table/list with a list of Tasks

  showModal = () => {
    this.setState({
      visible: true,
    });
  };
.
render() {
return ( 
<Table />

        <Button type="primary" onClick={this.showModal}>
          Add New Task
        </Button>
<CRTaskForm
        visible={this.state.visible} />

I have another React component CRTaskForm - which is basically a Modal Form to add Tasks

Now, my issue is 1. I want to handle the onSubmit in CRTaskForm - and close the form when the Task is created - there is a separate handler in CRTaskForm onSubmit(e) { .. } which handles sending the create task via REST to the server.

How do I close the Modal form in the onSubmit .. the "visible" props is not present in the CRTaskForm.

Answer 1

I would create a function which closes the modal and pass it to the form as a prop:

closeModal = () => {
  this.setState({
   visible: false
})
}

...

<CRTaskForm visible={this.state.visible} closeModal={this.closeModal}/>

And just call it in your submit function.