React Admin v4 Advanced Recipes: Creating a Record Related to the Current One

In this article, we’ll see how to let users create a new record related to the current one (for example, to add a new review for the current product) in a react-admin application. The creation form should have its relationship already set, and it should redirect to the original page after saving.

This tutorial is an update over the same tutorial for react-admin v3, which was itself an update of the same tutorial for react-admin v2.

Prefilling A Creation Form

We’ll leverage the <CreateButton> to link to the review creation page. We also need to preset the product_id field of the new review. We can use the state prop to do so. The <Create> component reads this state and uses it for the form default values.

// in src/products/CreateRelatedReviewButton.ts
import { CreateButton, useRecordContext } from "react-admin";

export const CreateRelatedReviewButton = () => {
  const product = useRecordContext();
  return (
    <CreateButton
      resource="reviews"
      state={{ record: { product_id: product.id } }}
    />
  );
};

Add this new <CreateRelatedReviewButton> to the product edition form. In this example, we’ll add it just after a <ReferenceManyField> that renders all the reviews for the current product:

// in src/products/ProductEdit.tsx
import {
  Edit,
  TabbedForm,
  ReferenceManyField,
  Datagrid,
  DateField,
  starField,
  EditButton,
} from "react-admin";
import { StarRatingField } from "./StarRatingField";
import { CreateRelatedReviewButton } from "./CreateRelatedReviewButton";

const ProductEdit = () => (
  <Edit>
    <TabbedForm>
      // ...
      <TabbedForm.Tab>
        <ReferenceManyField reference="reviews" target="product_id">
          <Datagrid>
            <DateField source="date" />
            <StarRatingField />
            <TextField source="comment" />
            <TextField source="status" />
            <EditButton />
          </Datagrid>
        </ReferenceManyField>
        <CreateRelatedReviewButton />
      </TabbedForm.Tab>
    </TabbedForm>
  </Edit>
);

Finally, we’ll write a creation form for the review. It will be a standard react-admin creation page—no need to set the form default values based on the location state, as <Create> does it automatically. We’ll just override the success callback to redirect to the related product page after submission:

// in src/reviews/ReviewCreate.tsx
import {
  SimpleForm,
  Create,
  ReferenceInput,
  TextInput,
  DateInput,
  AutocompleteInput,
  required,
  useNotify,
  useRedirect,
  getRecordFromLocation,
} from "react-admin";

const ReviewCreate = () => {
  const notify = useNotify();
  const redirect = useRedirect();
  const location = useLocation();

  const onSuccess = () => {
    // display a notification to confirm the creation
    notify("ra.notification.created");
    // get the initial values we set in the state earlier to know whether a product_id was provided
    const record = getRecordFromLocation(location);
    if (record && record.product_id) {
      // the record was created from the edit view of the product, redirect to it
      redirect(`/products/${record.product_id}/reviews`);
    } else {
      // redirect to the list of reviews
      redirect(`/reviews`);
    }
  };

  return (
    <Create mutationOptions={{ onSuccess }}>
      <SimpleForm>
        // ...
        <ReferenceInput source="product_id" reference="products">
          <AutocompleteInput
            optionText={productOptionRenderer}
            validate={required()}
          />
        </ReferenceInput>
        <DateInput
          source="date"
          defaultValue={new Date()}
          validate={required()}
        />
        <StarRatingInput source="rating" defaultValue={2} />
        <TextInput
          source="comment"
          multiline
          fullWidth
          resettable
          validate={required()}
        />
        // ...
      </SimpleForm>
    </Create>
  );
};

And that is it.

Creating a Related Record In a Dialog

The previous code works fine, but the user experience is perfectible. Users have to leave the product page to go to the review creation page, only to come back to the product page on success. It would be better if the review creation form opened in a dialog, so that users would never need to leave the product page.

We can achieve that by replacing the <CreateButton> with a <CreateInDialogButton>: it opens a <Create> form in a <Dialog> without neither leaving the current view nor modifying the URL.

<CreateInDialogButton> expects a form as child. This means we don’t need to use the location state to set the form default values. We can just use the record from the current context, leveraging the <WithRecord> component:

// in src/products/ProductEdit.tsx
const ProductEdit = () => (
  <Edit>
    <TabbedForm>
      // ...
      <TabbedForm.Tab>
        <ReferenceManyField reference="reviews" target="product_id">
          <Datagrid>
            <DateField source="date" />
            <StarRatingField />
            <TextField source="comment" />
            <TextField source="status" />
            <EditButton />
          </Datagrid>
        </ReferenceManyField>
        <WithRecord
          render={(record) => (
            <CreateInDialogButton record={{ product_id: record.id }}>
              <SimpleForm>
                // ...
                <DateInput
                  source="date"
                  defaultValue={new Date()}
                  validate={required()}
                />
                <StarRatingInput source="rating" defaultValue={2} />
                <TextInput
                  source="comment"
                  multiline
                  fullWidth
                  resettable
                  validate={required()}
                />
              </SimpleForm>
            </CreateInDialogButton>
          )}
        />
      </TabbedForm.Tab>
    </TabbedForm>
  </Edit>
);

Since the dialog closes after a successful form submission, we don’t need to customize the redirection to the product edition view anymore. Also, as the creation form will never be displayed directly, we don’t even need to include a <ReferenceInput> for the product_id. This solution requires less code and provides a better user experience than the first one.

Note that <CreateInDialogButton> is only a good fit for small forms, that can fit in a dialog. Also, it’s an Enterprise Edition component.

Conclusion

We hope this recipe will speed up your react-admin development and improve the user experience of your apps.

You can test both approaches and compare the the code in the react-admin e-commerce demo:

• Prefilled creation page: demo, source
• Creation form in dialog: demo, source.