Antd modal not showing on button click

Question

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;

Answer 1

Seems like Antd updated the props value name that was being passed to the Modal component. The prop open is now changed to visible so changing the code to:

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

does the trick. I found this by inspecting the element and altering the prop value. I don't know why but it is not anywhere in the antd documentation or maybe I missed it there.

Answer 2

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>
);