CODEWITHSUNDEEP
javascriptreactjsantd
sss
sss

Reputation: 291

Modal is not closing in ant-design

design some how onclick of cancel popup is not closing Some please , help me I stuked with this.When I inspect I got these class is adding ant-modal-mask ant-fade-appear ant-fade-appear-active ant-fade. Not sure what is the reason Please some one suggest solution

Here is the code.

import React, { useState,useEffect } from "react";
import { Modal, Button } from "antd";

import ReactDOM from "react-dom";
//import "antd/dist/antd.css";

const AddModal = (props) => {
  const [visible, setIsModalVisible] = useState(false);

  useEffect(() => {
    debugger
    showModal();
  }, [])

  const showModal = () => {
    setIsModalVisible(true);
  };

  const handleOk = () => {
    setIsModalVisible(false);
  };

  const handleCancel = () => {
    setIsModalVisible(false);
  };

  return (
         <div>
        <Modal
       destroyOnClose={true}
        maskClosable={false}
          title="Add Studies"
          className="modalHeader"
          visible={visible}
          onOk={handleOk}
          onCancel={handleCancel}
          width={720}
          footer={[
            <Button key="back" onClick={handleCancel}>
              Cancel
            </Button>,
            <Button
              key="Add"
              id="addButton"
              type="primary"
              onClick={handleOk}
            >
              Add
            </Button>,
          ]}
         
        ><div>hjhjg</div></Modal>
        </div>
 
  );
};
export default AddModal;

Upvotes: 0

Views: 2490

Answers (1)

Ali Faiz
Ali Faiz

Reputation: 232

don't call show modal inside useEffect Hook it will call it after each re-render hook call and your madal is open.

make visible to true at decleration time like

const [visible, setIsModalVisible] = useState(true) // make it true instead of false

Upvotes: 2

Related Questions