Please update the "Creating a Record Related to the Current One" to v4

[shlfung]

Is your feature request related to a problem? Please describe. The tutorial section is outdated for react-admin v4 https://marmelab.com/react-admin/AdvancedTutorials.html

Describe the solution you'd like Please update the tutorial and example code to be v4 compatible

Describe alternatives you've considered I have tried to follow the tutorial and example code, but it is not working under v4

Additional context Add any other context or screenshots about the feature request here.

[antoinefricker]

Thanks for pointing this out! We will debate the priority of this topic tomorrow.

[strarsis]

+1! The new v4 architecture surely makes things simpler but also different. How to create a new, related record inline, in a dialog? What hooks are used, how should the ID of referenced record be passed?

[otmi100]

This is what I came up with to add items to an invoice. Happy to see if there are better options?!

`import React, { FC, useState } from "react"; import { required, Button, TextInput, useNotify, NumberInput, useTranslate, CreateContextProvider, useCreateController, SimpleForm, useRecordContext } from "react-admin"; import IconContentAdd from "@mui/icons-material/Add"; import Dialog from "@mui/material/Dialog"; import DialogTitle from "@mui/material/DialogTitle"; import DialogContent from "@mui/material/DialogContent"; import { Invoiceitem } from "../types";

const InvoiceItemQuickCreateButton: FC = () => { const invoice = useRecordContext();

const createController = useCreateController({
    resource: "invoiceitems"
});
const [showDialog, setShowDialog] = useState(false);

const notify = useNotify();
const translate = useTranslate();

const handleSubmit = (values: Partial<Invoiceitem>) => {
    values.InvoiceId = invoice.id.toString();
    if (createController.save) {
        createController.save(values, {
            onSuccess: () => {
                notify("general.success");
            }
        });
    }
};

return (
    <>
        <Button
            onClick={() => setShowDialog(true)}
            label="ra.action.create"
        >
            <IconContentAdd />
        </Button>

        <Dialog
            fullWidth
            open={showDialog}
            onClose={() => setShowDialog(false)}
            aria-label="Create InvoiceItem"
        >
            <DialogTitle>{translate("ra.action.create")}</DialogTitle>
            <CreateContextProvider value={createController}>
                <SimpleForm onSubmit={handleSubmit} record={{}}>
                    <>
                        <DialogContent>
                            <TextInput source="Description" fullWidth />
                            <NumberInput
                                source="Amount"
                                validate={[required()]}
                                fullWidth
                            />
                            <NumberInput
                                source="Value"
                                validate={[required()]}
                                fullWidth
                            />
                            <TextInput source="Unit" fullWidth />
                            <NumberInput
                                source="VatRate"
                                validate={[required()]}
                                fullWidth
                            />
                        </DialogContent>
                    </>
                </SimpleForm>
            </CreateContextProvider>
        </Dialog>
    </>
);

};

export default InvoiceItemQuickCreateButton;`

[otmi100]

Sorry for the bad code formatting.. Also I wanted to thank you for react-admin! Cool stuff! Right now doing my migration from 3.x-> 4.x. Way better developer experience, good job guys!

This is my solution for the Quick-Edit Button:

`import React, { FC, useState } from "react"; import { required, Button, TextInput, NumberInput, useTranslate, SimpleForm, useRecordContext, EditBase } from "react-admin"; import IconContentEdit from "@mui/icons-material/Edit"; import Dialog from "@mui/material/Dialog"; import DialogTitle from "@mui/material/DialogTitle"; import DialogContent from "@mui/material/DialogContent"; import { Invoiceitem } from "../types";

export const InvoiceItemQuickEditButton: FC = () => { const [showDialog, setShowDialog] = useState(false); const translate = useTranslate(); const record = useRecordContext<Invoiceitem>();

return (
    <>
        <Button onClick={() => setShowDialog(true)} label="ra.action.edit">
            <IconContentEdit />
        </Button>

        <Dialog
            fullWidth
            open={showDialog}
            onClose={() => setShowDialog(false)}
            aria-label="Edit InvoiceItem"
        >
            <DialogTitle>{translate("ra.action.edit")}</DialogTitle>
            <EditBase
                resource="invoiceitems"
                id={record.id}
                redirect={() => {
                    setShowDialog(false);
                    return `invoices/${record.InvoiceId}/show`;
                }}
            >
                <SimpleForm>
                    <>
                        <DialogContent>
                            <TextInput source="Description" fullWidth />
                            <NumberInput
                                source="Amount"
                                validate={[required()]}
                                fullWidth
                            />
                            <NumberInput
                                source="Value"
                                validate={[required()]}
                                fullWidth
                            />
                            <TextInput source="Unit" fullWidth />
                            <NumberInput
                                source="VatRate"
                                validate={[required()]}
                                fullWidth
                            />
                        </DialogContent>
                    </>
                </SimpleForm>
            </EditBase>
        </Dialog>
    </>
);

}; `

[danysz]

+1