fascinating-indigo•13mo ago

Create Modal ID access?

Hi, I have a create modal that I need to pass an ID to; I've done so, and its in the query parameter -- /books?modal-books-create[open]=true&modal-books-create[id]=10 How could I access it inside the AntD Modal?

2 Replies

kapa.ai•13mo ago

Hi @avangeous. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- You can access the ID inside the AntD Modal using the useModalForm hook provided by Refine. This hook returns a set of properties, one of which is id that represents the record id for the edit action. Here is an example of how you can use it:

import { Edit, useModalForm } from "@refinedev/antd";  
import { Modal, Button } from "antd";  
  
const PostEdit: React.FC = () => {  
 const { modalProps, id, show } = useModalForm({  
 action: "edit",  
 });  
  
 return (  
 <div>  
 <Button onClick={() => show()}>Edit Button</Button>  
 <Modal {...modalProps}>  
 <Edit recordItemId={id}>  
 <p>Rest of your page here</p>  
 </Edit>  
 </Modal>  
 </div>  
 );  
};

import { Edit, useModalForm } from "@refinedev/antd";  
import { Modal, Button } from "antd";  
  
const PostEdit: React.FC = () => {  
 const { modalProps, id, show } = useModalForm({  
 action: "edit",  
 });  
  
 return (  
 <div>  
 <Button onClick={() => show()}>Edit Button</Button>  
 <Modal {...modalProps}>  
 <Edit recordItemId={id}>  
 <p>Rest of your page here</p>  
 </Edit>  
 </Modal>  
 </div>  
 );  
};

In this example, id is the record id for the edit action. You can use this id inside your modal. For more information, you can refer to the useModalForm documentation (https://refine.dev/docs/api-reference/antd/hooks/form/useModalForm). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•13mo ago

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