How do you change the params to which the <EditButton> should take you?

React Guy 0
Viewed 16

I'd like to change the params towards which the EditButton takes you. I want this button to take you to /:customer_id instead of /:id. Right now when you click on the "Edit" button in the table in the frontend, it takes you to "/id" (so for instance if you are in localhost:3000/purchases, and you click on the EditButton of the first row it takes you to, for example localhost:3000/purchases/1.

Instead, I want this button to take me to customer_id, like for example "localhost:3000/purchases/2138" (2138 is an example of a customer_id)

How can I do this?

edit react-admin frontend mysql reactjs
1 Answers

You can only do this by creating your own MyEditButton component based on the EditButton sources: https://github.com/marmelab/react-admin/blob/master/packages/ra-ui-materialui/src/button/EditButton.tsx

export const MyEditButton = <RecordType extends RaRecord = any>(
    props: EditButtonProps<RecordType>
) => {
    const {
        icon = defaultIcon,
        label = 'ra.action.edit',
        scrollToTop = true,
        ...rest
    } = props;
    const resource = useResourceContext(props);
    const record = useRecordContext(props);
    const createPath = useCreatePath();
    if (!record) return null;
    return (
        <Button
            component={Link}
            to={createPath({ type: 'edit', resource, id: record.id })}// <-- Relpace id: record.customer_id 
            state={scrollStates[String(scrollToTop)]}
            label={label}
            onClick={stopPropagation}
            {...(rest as any)}
        >
            {icon}
        </Button>
    );
};
MaxAlex0
Related