mute-gold•2y ago

Edit button not working in the useModalForm

Hi all, I'm using a useModalForm hook to create a edit form. My approach is working for create action but not working for the edit action.

const {
        modalProps: createPrescriptionModalProps,
        show: showCreatePrescriptionModal,
        formProps: createPrescriptionFormProps,
        form: createPrescriptionForm,
    } = useModalForm<IPrescription>({
        action: "create",
        resource: "prescriptions",
        warnWhenUnsavedChanges: true,
        redirect: false,
    });

    const {
        modalProps: editPrescriptionModalProps,
        show: showEditPrescriptionModal,
        formProps: editPrescriptionFormProps,
        form: editPrescriptionForm,
    } = useModalForm<IPrescription>({
        action: "edit",
        // id: prescFound?.id,
        resource: "prescriptions",
        warnWhenUnsavedChanges: true,
        redirect: false,
    });

const {
        modalProps: createPrescriptionModalProps,
        show: showCreatePrescriptionModal,
        formProps: createPrescriptionFormProps,
        form: createPrescriptionForm,
    } = useModalForm<IPrescription>({
        action: "create",
        resource: "prescriptions",
        warnWhenUnsavedChanges: true,
        redirect: false,
    });

    const {
        modalProps: editPrescriptionModalProps,
        show: showEditPrescriptionModal,
        formProps: editPrescriptionFormProps,
        form: editPrescriptionForm,
    } = useModalForm<IPrescription>({
        action: "edit",
        // id: prescFound?.id,
        resource: "prescriptions",
        warnWhenUnsavedChanges: true,
        redirect: false,
    });

creteprescriptionForm and editPrescriptionForm are mostly same. Why the form is not opening when action set to edit?

18 Replies

kapa.ai•2y ago

Hi @malith19. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- It seems like you're missing the id property in the useModalForm hook for the edit action. The id property is required when using the "edit" action to specify which record you want to edit. You have commented it out in your code. Here's the updated code with the id property:

const {
    modalProps: editPrescriptionModalProps,
    show: showEditPrescriptionModal,
    formProps: editPrescriptionFormProps,
    form: editPrescriptionForm,
} = useModalForm<IPrescription>({
    action: "edit",
    id: prescFound?.id,
    resource: "prescriptions",
    warnWhenUnsavedChanges: true,
    redirect: false,
});

const {
    modalProps: editPrescriptionModalProps,
    show: showEditPrescriptionModal,
    formProps: editPrescriptionFormProps,
    form: editPrescriptionForm,
} = useModalForm<IPrescription>({
    action: "edit",
    id: prescFound?.id,
    resource: "prescriptions",
    warnWhenUnsavedChanges: true,
    redirect: false,
});

Make sure that prescFound?.id has a valid value before invoking the useModalForm hook for the edit action. If the issue persists, please double-check your implementation and ensure that the showEditPrescriptionModal function is being called correctly. For more information on the useModalForm hook, you can refer to the 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•2y ago

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

mute-goldOP•2y ago

is it ok to put a dummy value to id prop @kapa.ai

kapa.ai•2y ago

Let me check the knowledge base for you. One moment! :books: Sorry @malith19, I seem to be having a bit of trouble. Don't worry though, I've pinged my supprt and they will try to fix me up! :technologist: Perhaps try again in 15mins?

mute-goldOP•2y ago

@kapa.ai Is it ok to put a dummy value to id prop

kapa.ai•2y ago

Let me check the knowledge base for you. One moment! :books: ---------------------- It's not recommended to put a dummy value for the id property when using the "edit" action in the useModalForm hook. The id is used to determine the record to edit, and providing an incorrect or dummy value may lead to unexpected behavior or errors in your application. Instead, you should ensure that you have a valid id value before invoking the useModalForm hook for the edit action. If you don't have a valid id at the time of hook invocation, you can consider using the setId function or the id property to update the id when it becomes available. For more information on the useModalForm hook and the id property, you can refer to the 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•2y ago

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

mute-goldOP•2y ago

problem is still there @kapa.ai I passed a id value manually but still edit form not opening @kapa.ai

kapa.ai•2y ago

Let me check the knowledge base for you. One moment! :books: ---------------------- If you have passed the id value manually and the edit form is still not opening, there might be an issue with how you're calling the showEditPrescriptionModal function. Make sure you're calling this function with the correct record id when the user clicks the edit button. Here's an example of how to add an edit button to your list and call the showEditPrescriptionModal function with the correct record id:

<Table.Column<IPrescription>
  title="Actions"
  dataIndex="actions"
  key="actions"
  render={(_value, record) => (
    <EditButton onClick={() => showEditPrescriptionModal(record.id)} />
  )}
/>

<Table.Column<IPrescription>
  title="Actions"
  dataIndex="actions"
  key="actions"
  render={(_value, record) => (
    <EditButton onClick={() => showEditPrescriptionModal(record.id)} />
  )}
/>

Please double-check your implementation and ensure that the showEditPrescriptionModal function is being called correctly with the appropriate record id. For more information on the useModalForm hook, you can refer to the 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•2y ago

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

mute-goldOP•2y ago

@kapa.ai I have form ok. I need to give the edit form if user wants to edit it after saving earlier. How can I do it

kapa.ai•2y ago

Let me check the knowledge base for you. One moment! :books: ---------------------- To allow users to edit a record after saving it, you can follow these steps: 1. Create an edit button in your list view that opens the edit form when clicked. 2. Use the useModalForm hook with the "edit" action and pass the record id when calling the show function. Here's an example of how to add an edit button to your list and call the showEditPrescriptionModal function with the correct record id:

<Table.Column<IPrescription>
  title="Actions"
  dataIndex="actions"
  key="actions"
  render={({ _value, record }) => (
    <EditButton onClick={() => showEditPrescriptionModal(record.id)} />
  )}
/>

<Table.Column<IPrescription>
  title="Actions"
  dataIndex="actions"
  key="actions"
  render={({ _value, record }) => (
    <EditButton onClick={() => showEditPrescriptionModal(record.id)} />
  )}
/>

Make sure you have the useModalForm hook set up with the "edit" action and the showEditPrescriptionModal function:

const {{
    modalProps: editPrescriptionModalProps,
    show: showEditPrescriptionModal,
    formProps: editPrescriptionFormProps,
    form: editPrescriptionForm,
}} = useModalForm<IPrescription>({{
    action: "edit",
    resource: "prescriptions",
    warnWhenUnsavedChanges: true,
    redirect: false,
}});

const {{
    modalProps: editPrescriptionModalProps,
    show: showEditPrescriptionModal,
    formProps: editPrescriptionFormProps,
    form: editPrescriptionForm,
}} = useModalForm<IPrescription>({{
    action: "edit",
    resource: "prescriptions",
    warnWhenUnsavedChanges: true,
    redirect: false,
}});

When the user clicks the edit button, the showEditPrescriptionModal function will be called with the appropriate record id, and the edit form will open with the data of the selected record. For more information on the useModalForm hook, you can refer to the 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•2y ago

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

mute-goldOP•2y ago

can't we pass the id in the use model form props @kapa.ai

kapa.ai•2y ago

Let me check the knowledge base for you. One moment! :books: ---------------------- Yes, you can pass the id in the useModalForm hook props. However, you need to make sure that the id has a valid value before invoking the useModalForm hook for the edit action. If the id is not available at the time of hook invocation, you can consider using the setId function or the id property to update the id when it becomes available. Here's an example of passing the id in the useModalForm hook props:

const {{
    modalProps: editPrescriptionModalProps,
    show: showEditPrescriptionModal,
    formProps: editPrescriptionFormProps,
    form: editPrescriptionForm,
}} = useModalForm<IPrescription>({{
    action: "edit",
    id: prescFound?.id,
    resource: "prescriptions",
    warnWhenUnsavedChanges: true,
    redirect: false,
}});

const {{
    modalProps: editPrescriptionModalProps,
    show: showEditPrescriptionModal,
    formProps: editPrescriptionFormProps,
    form: editPrescriptionForm,
}} = useModalForm<IPrescription>({{
    action: "edit",
    id: prescFound?.id,
    resource: "prescriptions",
    warnWhenUnsavedChanges: true,
    redirect: false,
}});

kapa.ai•2y ago

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

mute-goldOP•2y ago

@kapa.ai What is the form prop doing

kapa.ai•2y ago

Let me check the knowledge base for you. One moment! :books: @malith19 That's a great question, but unfortunately I am only capable of responding to a maximum of three questions per thread. Don't hesitate to create a new thread for any further questions you have though. I'm here to help!

Edit button not working in the useModalForm

Did you find this page helpful?