Search code examples
admin-on-rest

How to create a ReferenceInput wrapped component?


I'm trying to create a wrap component that includes admin-on-rest ReferenceInput

What am I missing?

I have seen the answer Error on Creating custom ReferenceInput with separate component but I do not know how to apply it in this case

//Works!!
export const commentsCreate = (props) => (
<Create title = "Create" {...props} >
    <SimpleForm>
        <ReferenceInput label="Posts" source="field" reference="posts"  allowEmpty {...props}>
            <AutocompleteInput optionText="name" {...props}/>
        </ReferenceInput>
    </SimpleForm>
</Create>
);

/*
Fail: 
ReferenceInput.js:303 Uncaught (in promise) TypeError: Cannot read property 'value' of undefined
at Function.mapStateToProps [as mapToProps] (ReferenceInput.js:303)
at mapToPropsProxy (wrapMapToProps.js:43)
.......
*/ 
export const commentsCreate = (props) => (
<Create title = "Create" {...props} >
    <SimpleForm>
        <Prueba {...props} />
    </SimpleForm>
</Create>
);

const Prueba = (props) => (
    <ReferenceInput label="Posts" source="field" reference="posts"  allowEmpty {...props}>
        <AutocompleteInput optionText="name" {...props}/>
    </ReferenceInput>
);

Solution

  • I found a (the?) solution.

    We need to use a redux-form Field component in Simpleform.

      import { Field } from 'redux-form';
    
      export const commentsCreate = (props) => (
        <Create title = "Create" {...props} >
          <SimpleForm>
            <Field name="field" component={Prueba} {...props} />
          </SimpleForm>
        </Create>
      );
    
      const Prueba = (props) => (
        <ReferenceInput label="Posts" source="field" reference="posts"  allowEmpty {...props}>
          <AutocompleteInput optionText="name" {...props}/>
        </ReferenceInput>
      );
    

    From https://redux-form.com/6.0.0-alpha.4/docs/api/field.md/

    The Field component is how you connect each individual input to the Redux store. There are three fundamental things that you need to understand in order to use Field correctly:

    The name prop is required. It is a string path, in dot-and-bracket notation, corresponding to a value in the form values. It may be as simple as 'firstName' or as complicated as contact.billing.address[2].phones[1].areaCode.

    The component prop is required. It may be a Component, a stateless function, or a factory, like those provided under React.DOM. See Usage section below. To learn about the props that will provided to whatever your component is, see the Props section below.

    All other props will be passed along to the element generated by the component prop.