variable-lime•8mo ago

hydration error with antd modal

I am using nextjs13. I get a hydration error the moment theres a modal on the page. The subsequent render removes the error.

<Modal open={true}>
        <p>yo</p>
      </Modal>

<Modal open={true}>
        <p>yo</p>
      </Modal>

2 Replies

kapa.ai•8mo ago

Hi @synisme. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Hmm, I don't know enough to give you a confident answer yet. The extracts provided do not contain specific information about a hydration error with Ant Design's Modal component in a Next.js application. However, Refine provides a useModal hook to manage an Ant Design Modal component. You can use the show and close props to control the modal's visibility. Here's an example from the documentation (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-modal):

import { useModal } from "@refinedev/antd";  
import { Modal, Button } from "antd";  
  
export const PostList: React.FC = () => {  
 const { show, modalProps } = useModal();  
  
 return (  
 <>  
 <Button onClick={show}>Show Modal</Button>  
 <Modal {...modalProps}>  
 <p>Modal Content</p>  
 </Modal>  
 </>  
 );  
};

import { useModal } from "@refinedev/antd";  
import { Modal, Button } from "antd";  
  
export const PostList: React.FC = () => {  
 const { show, modalProps } = useModal();  
  
 return (  
 <>  
 <Button onClick={show}>Show Modal</Button>  
 <Modal {...modalProps}>  
 <p>Modal Content</p>  
 </Modal>  
 </>  
 );  
};

In this example, the show function is used to open the modal. You might want to try this approach and see if it resolves your issue. If the problem persists, it could be related to a specific issue with Next.js or your application's configuration. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•8mo ago

<@183085423604662273> kapa.ai is still learning and improving, please let us know how it did by reacting below