CODEWITHSUNDEEP
reactjsadmin-on-restreact-admin
user3786798
user3786798

Reputation: 93

Pass existing record record/value to Create Component

we wanted to know how you could pass an existing/selected record from a List to a create view in react admin.

We have a situation where each entry in our list view has both an Edit and Create button. We want to be able to click on Create for said row and be able to have that row/record info show up in Create. I know this sounds no different than Editing it, but we want to be able to have a Duplicate/Create from Existing feature. If we just used a normal Create view we need to fill in info from scratch. We have cases where we want to create on-top of preexisting data.

Another reason why we ask this is because the react-admin docs specifically state that:

accepts a record prop, to initialize the form based on an value object.

We take this assume that you can pass your selected record into create, we have tried this but it does not seem to work.

Any help appreciated, thanks.

This is what I am thinking:

export const DataCreate = (props) => (
  <Create title="Create new " {...props} >
    <TabbedForm record={props.record} 
    //can we do something like this to pass record to create?> 
    <FormTab label = "Basic Info">
    <TextInput source="type" label="type" />

Upvotes: 1

Views: 2078

Answers (1)

Gildas Garcia
Gildas Garcia

Reputation: 7066

We recently updated the documentation for this use case: https://marmelab.com/react-admin/CreateEdit.html#prefilling-a-create-record

Here's an example:

The Create component

const commentDefaultValue = { nb_views: 0 };

export const CommentCreate = ({ location, ...props }) => (
    <Create
        record={(location.state && location.state.record) || defaultValue}
        location={location}
        {...props}
    >
        <SimpleForm>
            <TextInput source="author" />
            <RichTextInput source="body" />
            <NumberInput source="nb_views" />
        </SimpleForm>
    </Create>
);

The Create button

import Button from '@material-ui/core/Button';
import { Link } from 'react-router-dom';

const CreateRelatedCommentButton = ({ record }) => (
    <Button
        component={Link}
        to={{
            pathname: '/comments/create',
            state: { record: { post_id: record.id } },
        }}
    >
        Write a comment for that post
    </Button>
);

EDIT: The technique explained in the documentation will no longer be necessary when version 2.2.0 will be released. Create will automatically read its default values from the location state or search. See https://github.com/marmelab/react-admin/pull/1991. You'll still need the custom button though

Upvotes: 1

Related Questions