How can i get the action in a component that receives useModalForm props?
I have a component that shows as a drawer an receives useModalFrom props. how can i know the action? Because i want to manage the creation an edition on the same component.
Regards!
![No description](https://cdn.answeroverflow.com/1105845283876769853/image.png)
19 Replies
Hi @pabloat. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
To manage both creation and edition actions in the same component using
useModalForm
, you can pass the action
property to the refineCoreProps
object when invoking the useModalForm
hook. The action
property can be either "create"
or "edit"
.
Here's an example of how you can use the useModalForm
hook with different actions:
You can conditionally render different form fields or handle form submission differently based on the action
property. To do this, you can check the value of action
and render the appropriate fields or handle the form submission accordingly.
For more information on the useModalForm
hook, refer to the refine 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:
----------------------<@703699805242916934> kapa.ai is still learning and improving, please let us how it did by reacting below
mute-gold•17mo ago
do you want to get action and id from return value ?
ambitious-aqua•17mo ago
inside my component i want to know the action
i have this in the list component
const createDrawerFormProps = useModalForm<ILead, HttpError, ILead>({
refineCoreProps: { action: "create" },
});
const {
modal: { show: showCreateDrawer },
} = createDrawerFormProps;
<CreateLead {...createDrawerFormProps} />
export const CreateLead: React.FC<
UseModalFormReturnType<ILead, HttpError, ILead>
}) => { in CreateLead component i need to know the action if to this component i pass: const createDrawerFormProps = useModalForm<ILead, HttpError, ILead>({ refineCoreProps: { action: "edit" }, }); prop, the save button makes a PATCH so there must be a way of getting this
= ({watch, setValue, register, formState: { errors }, control, refineCore: { onFinish }, handleSubmit, modal: { visible, close }, saveButtonProps,
}) => { in CreateLead component i need to know the action if to this component i pass: const createDrawerFormProps = useModalForm<ILead, HttpError, ILead>({ refineCoreProps: { action: "edit" }, }); prop, the save button makes a PATCH so there must be a way of getting this
mute-gold•17mo ago
you can use this https://refine.dev/docs/api-reference/core/hooks/resource/useResource
detect action from current route.
for example if you are in
/lead/create
action will be createambitious-aqua•17mo ago
i dont have the route because is a drawer
mute-gold•17mo ago
yes
ambitious-aqua•17mo ago
it dowsent matter?
mute-gold•17mo ago
you need to pass action to your component. you are already giving action to drawer
you can pass same action to component manually
ambitious-aqua•17mo ago
ok, a was trying to use the refine props but yes i can make an extra prop ofcourse
on save it makes a post or patch so was wondering where it was obtaining that
i will look the link you shared, thanks
mute-gold•17mo ago
refineCoreProps: { action: "edit" }, is patch ^^
this is post
`
ambitious-aqua•17mo ago
yes i know
maybe i dont know how to make my self clear, because of my bad english 🙂
const { resources, resource, action, id } = useResource(); i am getting the "list" action because is a drawer i think
but i will add an extra prop manualy
mute-gold•17mo ago
because you are in
list
page. action detection works from URLambitious-aqua•17mo ago
yes, i understood
mute-gold•17mo ago
yes you need to add extra prop because useModal cannot detect action :/