Wrapper component for administrator on vacation

Question

I would like to create a new component containing Inputsboth Fieldsof aorand use it in <SimpleForm>and <TabbedForm>, as shown below:

const WrapperComp = () => {
  return (
    <div>
      <TextFieldLabel muiTheme={muiTheme}>Title Example</TextFieldLabel>,
      <TextInput source="status"/>,
      <TextField source="status"/>
    </div>
  )
} 

---

<SimpleForm>
  <WrapperComp />
</SimpleForm>

but i get Uncaught Error: The TextInput component wasn't called within a redux-form <Field>. Did you decorate it and forget to add the addField prop to your component?.

Any help would be greatly appreciated. Thank!

Answer 1

You need to use Fieldfrom a reduction form to decorate your AOR inputs and use TextField from AOR and pass {...props}as indicated by 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;

Answer 2

AOR SimpleForm , Redux-Form . , . . -

const WrapperComp = (props) => {
  return (
    <div>
      <TextFieldLabel {...props} muiTheme={muiTheme}>Title Example</TextFieldLabel>,
      <TextInput {...props} source="status"/>,
      <TextField {...props} source="status"/>
    </div>
  )
}