React - Close Modal on Form Submit - reactjs

Question

New to React. I am trying to find out how I can close a Modal after the Form Submit event has been triggered.
export default class UserAdmin extends Component {
constructor(props) {
super(props);
this.state = {
show_user_modal : false
}
}
// Handle User Modal
handleUserModalOpen = () => {
this.setState({ show_user_modal: true});
}
handleUserModalClose = () => {
this.setState({ show_user_modal: false});
}
render() {
const { show_user_modal } = this.state;
return (
<Content>
<div className="site-layout-background">
<div className="contentBody">
<Button type="primary"onClick={this.handleUserModalOpen}>
Add User
</Button>
{show_user_modal && <AddUserModal handleClose={this.handleUserModalClose}/>}
</div>
</div>
</Content>
)
}
}
This works perfectly to open and close the modal, and the submit is working perfectly inside the addUserModal, however I am unsure how I should close the modal after this has been completed. I have tried to setState() from the parent to the child but it doesn't want to even then show the modal. Any help appreciated!
**Adding addUserModal function:
function AddUserModal({handleClose}){
const [addUserForm] = Form.useForm();
/** POST User */
const postUser = (values) => {
axios.post('http://localhost:5000/portal/add-user', values)
.then(res => {
if (res.status === 200) {
console.log(res.data);
}
})
};
return(
<Modal title="Add User" okText="Confirm" visible={true} onCancel={handleClose}
onOk={() => {
addUserForm
.validateFields()
.then((values) => {
postUser(values);
addUserForm.resetFields();
})
.catch((info) => {
console.log('Validate Failed:', info);
});
}}
>
<Form
form={addUserForm}
name="addUserForm"
labelCol={{span: 5,}}
wrapperCol={{span: 16,}}
initialValues={{remember: false,}}
>
<Form.Item label="Username" name="username"
rules={[
{
required: true,
message: 'Please input a username!',
},
]}
>
<Input />
</Form.Item>
<Form.Item label="Email" name="email"
rules={[
{
required: true,
message: 'Please input an email address',
},
]}
><Input />
</Form.Item>
<Form.Item label="Password" name="password"
rules={[
{
required: true,
message: 'Please input a password',
},
]}
><Input.Password />
</Form.Item>
</Form>
</Modal>
);
}
export default AddUserModal;

Answer 1

Your modal has visible property always set to true. Pass show_user_modal variable to the child and use it in the modal visiblestate. The {show_user_modal && <AddUserModal... is unnecessary

Answer 2

handleClose is calling handleUserModalClose. I think the issue is something else. So you can try calling handleClose in .then of your API call and pass the visible prop as well
export default class UserAdmin extends Component {
constructor(props) {
super(props);
this.state = {
show_user_modal : false
}
}
// Handle User Modal
handleUserModalOpen = () => {
this.setState({ show_user_modal: true});
}
handleUserModalClose = () => {
this.setState({ show_user_modal: false});
}
render() {
const { show_user_modal } = this.state;
return (
<Content>
<div className="site-layout-background">
<div className="contentBody">
<Button type="primary"onClick={this.handleUserModalOpen}>
Add User
</Button>
{show_user_modal && <AddUserModal visible={show_user_modal} handleClose={this.handleUserModalClose}/>}
</div>
</div>
</Content>
)
}
}
and use it in AddUserModal
function AddUserModal({visible, handleClose}){
const [addUserForm] = Form.useForm();
/** POST User */
const postUser = (values) => {
axios.post('http://localhost:5000/portal/add-user', values)
.then(res => {
if (res.status === 200) {
console.log(res.data);
handleClose();
}
})
};
return(
<Modal title="Add User" okText="Confirm" visible={visible} onCancel={handleClose}
onOk={() => {
addUserForm
.validateFields()
.then((values) => {
postUser(values);
addUserForm.resetFields();
})
.catch((info) => {
console.log('Validate Failed:', info);
});
}}
>
<Form
form={addUserForm}
name="addUserForm"
labelCol={{span: 5,}}
wrapperCol={{span: 16,}}
initialValues={{remember: false,}}
>
<Form.Item label="Username" name="username"
rules={[
{
required: true,
message: 'Please input a username!',
},
]}
>
<Input />
</Form.Item>
<Form.Item label="Email" name="email"
rules={[
{
required: true,
message: 'Please input an email address',
},
]}
><Input />
</Form.Item>
<Form.Item label="Password" name="password"
rules={[
{
required: true,
message: 'Please input a password',
},
]}
><Input.Password />
</Form.Item>
</Form>
</Modal>
);
}
export default AddUserModal;