CODEWITHSUNDEEP
reactjsantdant-design-pro
Hitesh Pal
Hitesh Pal

Reputation: 1

How to Close first modal and open second modal in ant design

I want to create a nested modal when I open the first modal their will be a different card and when I clicked on the card I want to open a second modal and remove the first modal in ant design. I am using react js.

Please help me out

Upvotes: 0

Views: 3101

Answers (1)

Yushan
Yushan

Reputation: 1047

Just create two states like below to handle the models.

const App = () => {
  const [isMainModel, setMainModel] = useState(false); // First Model
  const [isSubModel, setSubModel] = useState(false); // Second Model

  const onSubModel = (e, stateSub = true, stateMain = false) => {
    setMainModel(stateMain);
    setSubModel(stateSub);
  };

  return (
    <>
      <Button type="primary" onClick={() => setMainModel(true)}>
        Open Modal
      </Button>
      <Modal
        title="Main Modal"
        visible={isMainModel}
        onOk={() => setMainModel(false)}
        onCancel={() => setMainModel(false)}
      >
        <Button type="primary" onClick={onSubModel}>
          Open Modal
        </Button>
      </Modal>
      <Modal
        title="Sub Modal"
        visible={isSubModel}
        onOk={(e) => onSubModel(e, false)}
        onCancel={(e) => onSubModel(e, false)}
      >
        <p>Some contents...</p>
        <p>Some contents...</p>
        <p>Some contents...</p>
      </Modal>
    </>
  );
};

export default App;

https://codesandbox.io/s/model-in-model-with-ant-68189293-6i99b?file=/src/App.js

Let me know if you need further support.

Upvotes: 1

Related Questions