CODEWITHSUNDEEP
react-admin
sunfly
sunfly

Reputation: 191

How to combine create and edit page in react-admin

I am new for the react and react-admin, but I am now using it in our project, everything is good, but there is one thing I don't know how to make it. in our application. the create and edit page almost same, the only difference is some fields are disabled in edit view, so I want to combine create and edit, is there any document about it. I searched it but it seems not an easy way to do it, it's appreciated if can get some sample code. thank you !!!

Hi @Mads, thank you for your answer, I update the question here. what I mean is last time, i also create a separate form like what you did and I insert the component directly as below (e.g. <Form/>). it will get an error: the invalid value for prop ‘save’ on tag I am just curious what's the difference with this way ({form('edit')})

<Edit {...props} undoable={false} style={{width: '100%'}}> <Form/> </Edit>

Upvotes: 3

Views: 2577

Answers (2)

Mads Lie Jensen
Mads Lie Jensen

Reputation: 390

You can do something like this:

const form = type => (
    <SimpleForm>
        <TextInput source="name"/>
        {type === 'create' ? <TextInput source="created_at"/> : ''}
    </SimpleForm>
);

export const EditView = ({classes, ...props}) => {
    return (
        <Edit {...props} undoable={false} style={{width: '100%'}}>
            {form('edit')}
        </Edit>
    );
};

export const CreateView = ({classes, ...props}) => {
    return (
        <Edit {...props} undoable={false} style={{width: '100%'}}>
            {form('create')}
        </Edit>
    );
};

Upvotes: 2

Brunno Vodola Martins
Brunno Vodola Martins

Reputation: 1692

I had a similar struggle and this is what I ended up doing:

// This is the reusable form component
const CategoryForm = (props) => (
  <SimpleForm {...props}>
    <TextInput source="name" label="Nome" />
    {props.type === "edit" && <p>This element only shows in edit mode</p>}
  </SimpleForm>
);

// Edit View Component
export const CategoryEdit = (props) => (
  <Edit {...props}>
    {/* Reusable form component with type prop set to 'edit' */}
    <CategoryForm type="edit" />
  </Edit>
);

// Create View Component
export const CategoryCreate = (props) => (
  <Create {...props}>
    {/* Reusable form component with type prop set to 'create' */}
    <CategoryForm type="create" />
  </Create>
);

Upvotes: 1

Related Questions