Admin-on-rest Reusable input field groups

Question

I would like to reuse input field blocks. for example Use the same group of fields in the Create and Edit forms, and do not repeat the code in several places.

The documentation shows an example, but uses <Field> and trying to use standard elements like <TextInput> gives errors. https://marmelab.com/blog/2017/01/13/admin-on-rest-0-7.html#use-your-own-component

Is there any problem or is something stopping this from working?

I expected the following to work fine:

const AddressInputs = (props) => (
    <span>
        <TextField source="address" {...props} />

        {/* Changing from TextField to TextInput gives errors
         /  <TextInput source="address" {...props} />
        */}
    </span>
)

export const ItemEdit = (props) => (
    <Edit {...props}>
        <SimpleForm>
            <AddressInputs />
        </SimpleForm>
    </Edit>
);

Answer 1

Similar to this

Field , AOR TextField AOR {...props}, kunal pareek

import React from 'react';
import {
    LongTextInput,
    ImageField,
    ImageInput,
    TextField
} from 'admin-on-rest';
import { Field } from 'redux-form';


const CustomGroupComp = (props) => (
    <div>
        <TextField source="status" {...props} />
        <Field name="staffComment" component={LongTextInput} label="staffComment" {...props}  />
        <Field name="adminComment" component={LongTextInput}  label="resources.faults.fields.adminComment" {...props} />
        <Field multiple name="fileA" component={ImageInput} accept="image/*">
            <ImageField source="path" title="title"/>
        </Field>
    </div>
);

export default CustomGroupComp;