extended-salmon
extended-salmon11mo 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
kapa.ai11mo 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
kapa.ai11mo ago
<@1122927158348763206> kapa.ai is still learning and improving, please let us know how it did by reacting below