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 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.