I'm trying to use antd for my react application but the provided modal doesn't seem to work. The button is visible, but nothing happens when I click it, no error is thrown.

I also tried this with other modals provided on their official modal documentation.

Modal code:

    import { Button, Modal } from 'antd';
    import React, { useState } from 'react';
    
    const App = () => {
      const [isModalOpen, setIsModalOpen] = useState(false);
    
      const showModal = () => {
        setIsModalOpen(true);
      };
    
      const handleOk = () => {
        setIsModalOpen(false);
      };
    
      const handleCancel = () => {
        setIsModalOpen(false);
      };
    
      return (
        <>
          <Button type="primary" onClick={showModal}>
            Open Modal
          </Button>
          <Modal title="Basic Modal" open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
            <p>Some contents...</p>
            <p>Some contents...</p>
            <p>Some contents...</p>
          </Modal>
        </>
      );
    };
    
    export default App;

I'm trying to use antd for my react application but the provided modal doesn't seem to work. The button is visible, but nothing happens when I click it, no error is thrown.

I also tried this with other modals provided on their official modal documentation.

Modal code:

    import { Button, Modal } from 'antd';
    import React, { useState } from 'react';
    
    const App = () => {
      const [isModalOpen, setIsModalOpen] = useState(false);
    
      const showModal = () => {
        setIsModalOpen(true);
      };
    
      const handleOk = () => {
        setIsModalOpen(false);
      };
    
      const handleCancel = () => {
        setIsModalOpen(false);
      };
    
      return (
        <>
          <Button type="primary" onClick={showModal}>
            Open Modal
          </Button>
          <Modal title="Basic Modal" open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
            <p>Some contents...</p>
            <p>Some contents...</p>
            <p>Some contents...</p>
          </Modal>
        </>
      );
    };
    
    export default App;

• javascript
• reactjs
• antd

3 Answers 3

Seems like Antd has updated the name of the property that is being passed to the Modal component.

The prop name open has changed to visible.

This code works:

<Modal title="Basic Modal" visible={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
    <p>Some contents...</p>
    <p>Some contents...</p>
    <p>Some contents...</p>
</Modal>

I found this by inspecting the element and altering the prop value.

Have you tried to import css correctly ?

import React, { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import 'antd/dist/antd.css';

import App from './App';

const rootElement = document.getElementById('root');
const root = createRoot(rootElement);

root.render(
  <StrictMode>
    <App />
  </StrictMode>
);

Try importing the CSS.

import "antd/dist/antd.css"

This worked for me when I created a new app. But I faced the same issue when I tried to integrate Modal into a previous React application.

I tried changing open has changed to visible, but even that didn't let me know how you fixed it. I appreciate it.