Wrapper component for admin-on-rest

Question

I would like to create a new component that contains Inputs and Fields from aor and use it in <SimpleForm> and <TabbedForm> as 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 appreciated. Thanks!

Answer 1

You need to use Field from redux-form to decorate your AOR inputs and use TextField from AOR and pass {...props} as pointed 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 works by passing the Redux-Form props into its children components. Since you are wrapping up your component, those props aren't passing down to the components you need. You will need to explicitly do this now. So something like

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