CODEWITHSUNDEEP
react-admin
JoelMercurio
JoelMercurio

Reputation: 117

Use a ReferenceField inside of an ArrayInput/SimpleFormIterator

As the title says. I need to use a ReferenceField inside of a ArrayInput/SimpleFormIterator. I keep getting the following error:

TypeError: Cannot read property 'replace' of undefined

Versions:

react-admin: 3.2.3
react: 16.12.0

Here is a snippet of the code:

<ArrayInput source="specialties" label="">
  <SimpleFormIterator disableAdd>
    <ReferenceField label="Specialties Link" source="ID" reference="specialty" link="show" >
      <TextField source="ID" />
    </ReferenceField>
    <TextInput source="vendorSpecialtyText" label="Vendor Specialty Text" />
  </SimpleFormIterator>
</ArrayInput>

There is a resource called specialty and this works inside of an ArrayField in other parts of the application like so:

<ArrayField source="specialties" label=" Specialties">
  <SingleFieldList>
    <ReferenceField label="Specialties Link" source="ID" reference="specialty" link="show" >
      <TextField source="ID" />
    </ReferenceField>
  </SingleFieldList>
</ArrayField>

Not sure if this just isn't possible within this framework or if I'm implementing this wrong. If there is a way to fix this or a different want to go about this please let me know! Thanks.

Upvotes: 0

Views: 845

Answers (1)

Samuel
Samuel

Reputation: 26

From the documentation:

Note: SimpleFormIterator only accepts Input components as children. If you want to use some Fields instead, you have to use a <FormDataConsumer> to get the correct source,..." 

import { ArrayInput, SimpleFormIterator, DateInput, TextInput, FormDataConsumer } from 'react-admin';

<ArrayInput source="backlinks">
    <SimpleFormIterator disableRemove >
        <DateInput source="date" />
        <FormDataConsumer>
            {({ getSource, scopedFormData }) => {
                return (
                    <TextField
                        source={getSource('url')}
                        record={scopedFormData}
                    />
                );
            }}
        </FormDataConsumer>
    </SimpleFormIterator>
</ArrayInput>

or include input fields

<ArrayInput source="specialties" label="">
  <SimpleFormIterator disableAdd>
    <ReferenceInput label="Specialties Link" source="ID" reference="specialty">
      <SelectInput optionText="{Your description field}"  />
    </ReferenceInput>
    <TextInput source="vendorSpecialtyText" label="Vendor Specialty Text" />
  </SimpleFormIterator>
</ArrayInput>

Upvotes: 1

Related Questions