optimistic-gold•17mo ago

CloneButton is not working

I have added a clone button on my list of data but the when I click on it it doesn't redirect me to the clone page. In version 3 there was not any issue but in version 4 it is not working.

11 Replies

kapa.ai•17mo ago

Hi @dipbazz. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

kapa.ai•17mo ago

---------------------- In version 4, the resourceNameOrRouteName prop is deprecated, and you should use the resource prop instead. This might be the reason why the CloneButton is not working as expected. Here's an example of how to use the resource prop with the CloneButton:

import { CloneButton } from "@refinedev/mui"; // or "@refinedev/antd", "@refinedev/mantine", "@refinedev/chakra-ui" depending on your UI library
  
const MyCloneComponent = () => {  
 return (  
 <CloneButton resource="categories" recordItemId="2" />  
 );  
};

import { CloneButton } from "@refinedev/mui"; // or "@refinedev/antd", "@refinedev/mantine", "@refinedev/chakra-ui" depending on your UI library
  
const MyCloneComponent = () => {  
 return (  
 <CloneButton resource="categories" recordItemId="2" />  
 );  
};

Clicking the button will trigger the clone method of useNavigation (https://refine.dev/docs/api-reference/core/hooks/navigation/useNavigation/) and then redirect the app to /categories/clone/2. Make sure to update your CloneButton component with the resource prop, and it should work as expected. Sources: - MUI CloneButton (https://refine.dev/docs/api-reference/mui/components/buttons/clone-button) - AntD CloneButton (https://refine.dev/docs/api-reference/antd/components/buttons/clone-button) - Mantine CloneButton (https://refine.dev/docs/api-reference/mantine/components/buttons/clone-button) - Chakra-UI CloneButton (https://refine.dev/docs/api-reference/chakra-ui/components/buttons/clone-button) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

useNavigation | refine

useNavigation is a hook that provides methods to navigate the app. Internally, it uses the go method of the routerProvider.

Clone | refine

Material UI component. It uses the clone method from useNavigation under the hood.

Clone | refine

uses Ant Design's component. It uses the clone method from useNavigation under the hood.

Clone | refine

uses Mantine's component. It uses the clone method from useNavigation under the hood.

Clone | refine

uses Chakra UI's component. It uses the clone method from useNavigation under the hood.

kapa.ai•17mo ago

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

optimistic-gold•17mo ago

@kapa.ai I have added a resource prop, but it still doesn't redirect me to the clone page.

kapa.ai•17mo ago

Let me check the knowledge base for you again. One moment! :books:

kapa.ai•17mo ago

---------------------- Hmm, I don't know enough to give you a confident answer yet. I recommend checking the refine documentation (https://refine.dev/docs) for more information on how to properly implement the CloneButton and other components. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

Overview | refine

What is refine?

kapa.ai•17mo ago

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

correct-apricot•17mo ago

Hey @dipbazz, yo'll also need to define a clone action in your resource definition to make it available for a resource.

optimistic-gold•17mo ago

Hey @aliemirs should I also create a component for clone?

correct-apricot•17mo ago

Yes, you'll also need to define a route for it. The component can be same with the create action if you don't have action: "create" in its hooks and infer it from the route. In the earlier versions, we were creating a route like /<resource>/clone/id and render the same component that you're passing to the create action. With the new version, this is now on user space.

optimistic-gold•17mo ago

Thank you @aliemirs for your response. I solved my problem.