dependent-tan
dependent-tan14mo 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
kapa.ai14mo 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
kapa.ai14mo 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
kapa.ai14mo ago
<@494653850632978472> kapa.ai is still learning and improving, please let us how it did by reacting below
dependent-tan
dependent-tan14mo ago
@kapa.ai I have added a resource prop, but it still doesn't redirect me to the clone page.
kapa.ai
kapa.ai14mo ago
Let me check the knowledge base for you again. One moment! :books:
kapa.ai
kapa.ai14mo 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
kapa.ai14mo ago
<@494653850632978472> kapa.ai is still learning and improving, please let us how it did by reacting below
unwilling-turquoise
unwilling-turquoise14mo ago
Hey @dipbazz, yo'll also need to define a clone action in your resource definition to make it available for a resource.
dependent-tan
dependent-tan14mo ago
Hey @aliemirs should I also create a component for clone?
unwilling-turquoise
unwilling-turquoise14mo 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.
dependent-tan
dependent-tan14mo ago
Thank you @aliemirs for your response. I solved my problem.