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!

score 3 · Accepted Answer · answered Nov 10 '17 at 18:46

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;

Interesting. The solution I posted below is working fine on my code. I think this https://github.com/marmelab/admin-on-rest/issues/896 might have something to do with it. — kunal pareek, Nov 13 '17 at 05:23

score -1 · Answer 2 · answered Nov 06 '17 at 07:48

-1

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>
  )
}

answered Nov 06 '17 at 07:48

kunal pareek

1,285
10
21

I have also this issue but your solution doesnt work properly. It comes with this error: "the TextInput component wasn't called within a redux-form " – thodwris Nov 09 '17 at 18:50
try passing addField=true as a prop to the component – kunal pareek Nov 10 '17 at 05:56
What's your AOR version? – kunal pareek Nov 10 '17 at 05:58
AOR version 1.3.2 – thodwris Nov 10 '17 at 09:35
The latest iterations of AOR have some changes from the one I am using. Above might not work. However try the addField=true as a prop to textInput and see. – kunal pareek Nov 10 '17 at 10:36

Wrapper component for admin-on-rest

2 Answers2

Linked