CODEWITHSUNDEEP
javascriptreactjsantd
Siddharth Joshi
Siddharth Joshi

Reputation: 315

Antd modal not showing on button click

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;

Upvotes: 4

Views: 7149

Answers (3)

Geoffrey Rathinapandi
Geoffrey Rathinapandi

Reputation: 9

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.

Upvotes: 0

Siddharth Joshi
Siddharth Joshi

Reputation: 315

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.

Upvotes: 24

Josia RAZAFINJATOVO
Josia RAZAFINJATOVO

Reputation: 21

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

Upvotes: 0

Related Questions