I wish to insert multiple customers to a booking using ReferenceArrayInput but when I use it the Create page won't render at all.
in bookings.js:
export const BookingCreate = (props) => (
<Create {...props}>
<SimpleForm>
<ReferenceInput label="Customer" source="customer_id" reference="customers" allowEmpty>
<SelectInput optionText="customer_name" />
</ReferenceInput>
<ReferenceArrayInput source="customer_ids" reference="customers">
<SelectArrayInput optionText="customer_name" />
</ReferenceArrayInput>
</SimpleForm>
</Create>
);
I am very new to react and javascript and apis. I suspect that I may have written incorrect/missing apis. ReferenceInput works fine so I am quite confused.
If someone could please explain to me what api is being called for ReferenceArrayInput and how I should handle it and provide an example of what should the response contain I would be very thankful. I've already gone through the documentation but I still cannot understand it.
This is the error I got from the web console when trying to access the Create page:
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in. Check the render method of `BookingCreate`. bundle.js:1090:15
invariant http://localhost:3000/static/js/bundle.js:1090:15
instantiateReactComponent http://localhost:3000/static/js/bundle.js:41629:23
performInitialMount http://localhost:3000/static/js/bundle.js:99988:17
mountComponent http://localhost:3000/static/js/bundle.js:99879:16
mountComponent http://localhost:3000/static/js/bundle.js:12123:18
mountChildren http://localhost:3000/static/js/bundle.js:104483:28
_createInitialChildren http://localhost:3000/static/js/bundle.js:101351:27
mountComponent http://localhost:3000/static/js/bundle.js:101170:7
mountComponent http://localhost:3000/static/js/bundle.js:12123:18
mountChildren http://localhost:3000/static/js/bundle.js:104483:28
_createInitialChildren http://localhost:3000/static/js/bundle.js:101351:27
mountComponent http://localhost:3000/static/js/bundle.js:101170:7
mountComponent http://localhost:3000/static/js/bundle.js:12123:18
mountChildren http://localhost:3000/static/js/bundle.js:104483:28
_createInitialChildren http://localhost:3000/static/js/bundle.js:101351:27
mountComponent http://localhost:3000/static/js/bundle.js:101170:7
mountComponent http://localhost:3000/static/js/bundle.js:12123:18
performInitialMount http://localhost:3000/static/js/bundle.js:99992:18
mountComponent http://localhost:3000/static/js/bundle.js:99879:16
mountComponent http://localhost:3000/static/js/bundle.js:12123:18
performInitialMount http://localhost:3000/static/js/bundle.js:99992:18
mountComponent http://localhost:3000/static/js/bundle.js:99879:16
mountComponent http://localhost:3000/static/js/bundle.js:12123:18
performInitialMount http://localhost:3000/static/js/bundle.js:99992:18
mountComponent http://localhost:3000/static/js/bundle.js:99879:16
mountComponent http://localhost:3000/static/js/bundle.js:12123:18
performInitialMount http://localhost:3000/static/js/bundle.js:99992:18
mountComponent http://localhost:3000/static/js/bundle.js:99879:16
mountComponent http://localhost:3000/static/js/bundle.js:12123:18
performInitialMount http://localhost:3000/static/js/bundle.js:99992:18
mountComponent http://localhost:3000/static/js/bundle.js:99879:16
mountComponent http://localhost:3000/static/js/bundle.js:12123:18
mountChildren http://localhost:3000/static/js/bundle.js:104483:28
_createInitialChildren http://localhost:3000/static/js/bundle.js:101351:27
mountComponent http://localhost:3000/static/js/bundle.js:101170:7
mountComponent http://localhost:3000/static/js/bundle.js:12123:18
mountChildren http://localhost:3000/static/js/bundle.js:104483:28
_createInitialChildren http://localhost:3000/static/js/bundle.js:101351:27
mountComponent http://localhost:3000/static/js/bundle.js:101170:7
mountComponent http://localhost:3000/static/js/bundle.js:12123:18
performInitialMount http://localhost:3000/static/js/bundle.js:99992:18
mountComponent http://localhost:3000/static/js/bundle.js:99879:16
mountComponent http://localhost:3000/static/js/bundle.js:12123:18
performInitialMount http://localhost:3000/static/js/bundle.js:99992:18
mountComponent http://localhost:3000/static/js/bundle.js:99879:16
mountComponent http://localhost:3000/static/js/bundle.js:12123:18
mountChildren http://localhost:3000/static/js/bundle.js:104483:28
_createInitialChildren http://localhost:3000/static/js/bundle.js:101351:27
mountComponent http://localhost:3000/static/js/bundle.js:101170:7
mountComponent http://localhost:3000/static/js/bundle.js:12123:18
performInitialMount http://localhost:3000/static/js/bundle.js:99992:18
mountComponent http://localhost:3000/static/js/bundle.js:99879:16
mountComponent http://localhost:3000/static/js/bundle.js:12123:18
performInitialMount http://localhost:3000/static/js/bundle.js:99992:18
mountComponent http://localhost:3000/static/js/bundle.js:99879:16
mountComponent http://localhost:3000/static/js/bundle.js:12123:18
performInitialMount http://localhost:3000/static/js/bundle.js:99992:18
mountComponent http://localhost:3000/static/js/bundle.js:99879:16
mountComponent http://localhost:3000/static/js/bundle.js:12123:18
performInitialMount http://localhost:3000/static/js/bundle.js:99992:18
mountComponent http://localhost:3000/static/js/bundle.js:99879:16
mountComponent http://localhost:3000/static/js/bundle.js:12123:18
_updateRenderedComponent http://localhost:3000/static/js/bundle.js:100386:24
_performComponentUpdate http://localhost:3000/static/js/bundle.js:100345:5
updateComponent http://localhost:3000/static/js/bundle.js:100266:7
receiveComponent http://localhost:3000/static/js/bundle.js:100168:5
receiveComponent http://localhost:3000/static/js/bundle.js:12202:5
_updateRenderedComponent http://localhost:3000/static/js/bundle.js:100375:7
_performComponentUpdate http://localhost:3000/static/js/bundle.js:100345:5
updateComponent http://localhost:3000/static/js/bundle.js:100266:7
receiveComponent http://localhost:3000/static/js/bundle.js:100168:5
receiveComponent http://localhost:3000/static/js/bundle.js:12202:5
_updateRenderedComponent http://localhost:3000/static/js/bundle.js:100375:7
_performComponentUpdate http://localhost:3000/static/js/bundle.js:100345:5
updateComponent http://localhost:3000/static/js/bundle.js:100266:7
receiveComponent http://localhost:3000/static/js/bundle.js:100168:5
receiveComponent http://localhost:3000/static/js/bundle.js:12202:5
_updateRenderedComponent http://localhost:3000/static/js/bundle.js:100375:7
_performComponentUpdate http://localhost:3000/static/js/bundle.js:100345:5
updateComponent http://localhost:3000/static/js/bundle.js:100266:7
receiveComponent http://localhost:3000/static/js/bundle.js:100168:5
receiveComponent http://localhost:3000/static/js/bundle.js:12202:5
_updateRenderedComponent http://localhost:3000/static/js/bundle.js:100375:7
_performComponentUpdate http://localhost:3000/static/js/bundle.js:100345:5
updateComponent http://localhost:3000/static/js/bundle.js:100266:7
receiveComponent http://localhost:3000/static/js/bundle.js:100168:5
receiveComponent http://localhost:3000/static/js/bundle.js:12202:5
_updateRenderedComponent http://localhost:3000/static/js/bundle.js:100375:7
_performComponentUpdate http://localhost:3000/static/js/bundle.js:100345:5
updateComponent http://localhost:3000/static/js/bundle.js:100266:7
receiveComponent http://localhost:3000/static/js/bundle.js:100168:5
receiveComponent http://localhost:3000/static/js/bundle.js:12202:5
_updateRenderedComponent http://localhost:3000/static/js/bundle.js:100375:7
_performComponentUpdate http://localhost:3000/static/js/bundle.js:100345:5
updateComponent http://localhost:3000/static/js/bundle.js:100266:7
receiveComponent http://localhost:3000/static/js/bundle.js:100168:5
receiveComponent http://localhost:3000/static/js/bundle.js:12202:5
_updateRenderedComponent http://localhost:3000/static/js/bundle.js:100375:7
_performComponentUpdate http://localhost:3000/static/js/bundle.js:100345:5
updateComponent http://localhost:3000/static/js/bundle.js:100266:7
receiveComponent http://localhost:3000/static/js/bundle.js:100168:5
receiveComponent http://localhost:3000/static/js/bundle.js:12202:5
updateChildren http://localhost:3000/static/js/bundle.js:99525:9
_reconcilerUpdateChildren http://localhost:3000/static/js/bundle.js:104453:11
_updateChildren http://localhost:3000/static/js/bundle.js:104557:26
updateChildren http://localhost:3000/static/js/bundle.js:104544:7
_updateDOMChildren http://localhost:3000/static/js/bundle.js:101590:7
updateComponent http://localhost:3000/static/js/bundle.js:101408:5
receiveComponent http://localhost:3000/static/js/bundle.js:101370:5
receiveComponent http://localhost:3000/static/js/bundle.js:12202:5
updateChildren http://localhost:3000/static/js/bundle.js:99525:9
_reconcilerUpdateChildren http://localhost:3000/static/js/bundle.js:104453:11
_updateChildren http://localhost:3000/static/js/bundle.js:104557:26
updateChildren http://localhost:3000/static/js/bundle.js:104544:7
_updateDOMChildren http://localhost:3000/static/js/bundle.js:101590:7
updateComponent http://localhost:3000/static/js/bundle.js:101408:5
receiveComponent http://localhost:3000/static/js/bundle.js:101370:5
receiveComponent http://localhost:3000/static/js/bundle.js:12202:5
updateChildren http://localhost:3000/static/js/bundle.js:99525:9
_reconcilerUpdateChildren http://localhost:3000/static/js/bundle.js:104453:11
_updateChildren http://localhost:3000/static/js/bundle.js:104557:26
updateChildren http://localhost:3000/static/js/bundle.js:104544:7
_updateDOMChildren http://localhost:3000/static/js/bundle.js:101590:7
updateComponent http://localhost:3000/static/js/bundle.js:101408:5
receiveComponent http://localhost:3000/static/js/bundle.js:101370:5
receiveComponent http://localhost:3000/static/js/bundle.js:12202:5
updateChildren http://localhost:3000/static/js/bundle.js:99525:9
_reconcilerUpdateChildren http://localhost:3000/static/js/bundle.js:104453:11
Trying to get ReferenceArrayInput to work I then went on to try to get SelectArrayInput to work but when I tried it it gave the same issue of causing the Create page to not render.
From my testing/possibly misguided understanding, I am under the impression that for SelectArrayInput to display on my Create page I would not even have to have any apis or variables written for it yet and that would only become an issue after the api call has been made with input from SelectArrayInput.
using bookings.js as example:
export const BookingCreate = (props) => (
<Create {...props}>
<SimpleForm>
<SelectArrayInput source="categories" choices={[
{ id: 'music', name: 'Music' },
{ id: 'photography', name: 'Photo' },
{ id: 'programming', name: 'Code' },
{ id: 'tech', name: 'Technology' },
{ id: 'sport', name: 'Sport' },
]} />
<SelectInput source="category" choices={[
{ id: 'programming', name: 'Programming' },
{ id: 'lifestyle', name: 'Lifestyle' },
{ id: 'photography', name: 'Photography' },
]} />
</SimpleForm>
</Create>
);
I got the same error for SelectArrayInput in the web console as well:
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in. Check the render method of `BookingCreate`. bundle.js:1090:15
invariant http://localhost:3000/static/js/bundle.js:1090:15
instantiateReactComponent http://localhost:3000/static/js/bundle.js:41629:23
performInitialMount http://localhost:3000/static/js/bundle.js:99985:17
mountComponent http://localhost:3000/static/js/bundle.js:99876:16
mountComponent http://localhost:3000/static/js/bundle.js:12123:18
mountChildren http://localhost:3000/static/js/bundle.js:104480:28
_createInitialChildren http://localhost:3000/static/js/bundle.js:101348:27
mountComponent http://localhost:3000/static/js/bundle.js:101167:7
mountComponent http://localhost:3000/static/js/bundle.js:12123:18
mountChildren http://localhost:3000/static/js/bundle.js:104480:28
_createInitialChildren http://localhost:3000/static/js/bundle.js:101348:27
mountComponent http://localhost:3000/static/js/bundle.js:101167:7
mountComponent http://localhost:3000/static/js/bundle.js:12123:18
mountChildren http://localhost:3000/static/js/bundle.js:104480:28
_createInitialChildren http://localhost:3000/static/js/bundle.js:101348:27
mountComponent http://localhost:3000/static/js/bundle.js:101167:7
mountComponent http://localhost:3000/static/js/bundle.js:12123:18
performInitialMount http://localhost:3000/static/js/bundle.js:99989:18
mountComponent http://localhost:3000/static/js/bundle.js:99876:16
mountComponent http://localhost:3000/static/js/bundle.js:12123:18
performInitialMount http://localhost:3000/static/js/bundle.js:99989:18
mountComponent http://localhost:3000/static/js/bundle.js:99876:16
mountComponent http://localhost:3000/static/js/bundle.js:12123:18
performInitialMount http://localhost:3000/static/js/bundle.js:99989:18
mountComponent http://localhost:3000/static/js/bundle.js:99876:16
mountComponent http://localhost:3000/static/js/bundle.js:12123:18
performInitialMount http://localhost:3000/static/js/bundle.js:99989:18
mountComponent http://localhost:3000/static/js/bundle.js:99876:16
mountComponent http://localhost:3000/static/js/bundle.js:12123:18
performInitialMount http://localhost:3000/static/js/bundle.js:99989:18
mountComponent http://localhost:3000/static/js/bundle.js:99876:16
mountComponent http://localhost:3000/static/js/bundle.js:12123:18
mountChildren http://localhost:3000/static/js/bundle.js:104480:28
_createInitialChildren http://localhost:3000/static/js/bundle.js:101348:27
mountComponent http://localhost:3000/static/js/bundle.js:101167:7
mountComponent http://localhost:3000/static/js/bundle.js:12123:18
mountChildren http://localhost:3000/static/js/bundle.js:104480:28
_createInitialChildren http://localhost:3000/static/js/bundle.js:101348:27
mountComponent http://localhost:3000/static/js/bundle.js:101167:7
mountComponent http://localhost:3000/static/js/bundle.js:12123:18
performInitialMount http://localhost:3000/static/js/bundle.js:99989:18
mountComponent http://localhost:3000/static/js/bundle.js:99876:16
mountComponent http://localhost:3000/static/js/bundle.js:12123:18
performInitialMount http://localhost:3000/static/js/bundle.js:99989:18
mountComponent http://localhost:3000/static/js/bundle.js:99876:16
mountComponent http://localhost:3000/static/js/bundle.js:12123:18
mountChildren http://localhost:3000/static/js/bundle.js:104480:28
_createInitialChildren http://localhost:3000/static/js/bundle.js:101348:27
mountComponent http://localhost:3000/static/js/bundle.js:101167:7
mountComponent http://localhost:3000/static/js/bundle.js:12123:18
performInitialMount http://localhost:3000/static/js/bundle.js:99989:18
mountComponent http://localhost:3000/static/js/bundle.js:99876:16
mountComponent http://localhost:3000/static/js/bundle.js:12123:18
performInitialMount http://localhost:3000/static/js/bundle.js:99989:18
mountComponent http://localhost:3000/static/js/bundle.js:99876:16
mountComponent http://localhost:3000/static/js/bundle.js:12123:18
performInitialMount http://localhost:3000/static/js/bundle.js:99989:18
mountComponent http://localhost:3000/static/js/bundle.js:99876:16
mountComponent http://localhost:3000/static/js/bundle.js:12123:18
performInitialMount http://localhost:3000/static/js/bundle.js:99989:18
mountComponent http://localhost:3000/static/js/bundle.js:99876:16
mountComponent http://localhost:3000/static/js/bundle.js:12123:18
_updateRenderedComponent http://localhost:3000/static/js/bundle.js:100383:24
_performComponentUpdate http://localhost:3000/static/js/bundle.js:100342:5
updateComponent http://localhost:3000/static/js/bundle.js:100263:7
receiveComponent http://localhost:3000/static/js/bundle.js:100165:5
receiveComponent http://localhost:3000/static/js/bundle.js:12202:5
_updateRenderedComponent http://localhost:3000/static/js/bundle.js:100372:7
_performComponentUpdate http://localhost:3000/static/js/bundle.js:100342:5
updateComponent http://localhost:3000/static/js/bundle.js:100263:7
receiveComponent http://localhost:3000/static/js/bundle.js:100165:5
receiveComponent http://localhost:3000/static/js/bundle.js:12202:5
_updateRenderedComponent http://localhost:3000/static/js/bundle.js:100372:7
_performComponentUpdate http://localhost:3000/static/js/bundle.js:100342:5
updateComponent http://localhost:3000/static/js/bundle.js:100263:7
receiveComponent http://localhost:3000/static/js/bundle.js:100165:5
receiveComponent http://localhost:3000/static/js/bundle.js:12202:5
_updateRenderedComponent http://localhost:3000/static/js/bundle.js:100372:7
_performComponentUpdate http://localhost:3000/static/js/bundle.js:100342:5
updateComponent http://localhost:3000/static/js/bundle.js:100263:7
receiveComponent http://localhost:3000/static/js/bundle.js:100165:5
receiveComponent http://localhost:3000/static/js/bundle.js:12202:5
_updateRenderedComponent http://localhost:3000/static/js/bundle.js:100372:7
_performComponentUpdate http://localhost:3000/static/js/bundle.js:100342:5
updateComponent http://localhost:3000/static/js/bundle.js:100263:7
receiveComponent http://localhost:3000/static/js/bundle.js:100165:5
receiveComponent http://localhost:3000/static/js/bundle.js:12202:5
_updateRenderedComponent http://localhost:3000/static/js/bundle.js:100372:7
_performComponentUpdate http://localhost:3000/static/js/bundle.js:100342:5
updateComponent http://localhost:3000/static/js/bundle.js:100263:7
receiveComponent http://localhost:3000/static/js/bundle.js:100165:5
receiveComponent http://localhost:3000/static/js/bundle.js:12202:5
_updateRenderedComponent http://localhost:3000/static/js/bundle.js:100372:7
_performComponentUpdate http://localhost:3000/static/js/bundle.js:100342:5
updateComponent http://localhost:3000/static/js/bundle.js:100263:7
receiveComponent http://localhost:3000/static/js/bundle.js:100165:5
receiveComponent http://localhost:3000/static/js/bundle.js:12202:5
_updateRenderedComponent http://localhost:3000/static/js/bundle.js:100372:7
_performComponentUpdate http://localhost:3000/static/js/bundle.js:100342:5
updateComponent http://localhost:3000/static/js/bundle.js:100263:7
receiveComponent http://localhost:3000/static/js/bundle.js:100165:5
receiveComponent http://localhost:3000/static/js/bundle.js:12202:5
updateChildren http://localhost:3000/static/js/bundle.js:99522:9
_reconcilerUpdateChildren http://localhost:3000/static/js/bundle.js:104450:11
_updateChildren http://localhost:3000/static/js/bundle.js:104554:26
updateChildren http://localhost:3000/static/js/bundle.js:104541:7
_updateDOMChildren http://localhost:3000/static/js/bundle.js:101587:7
updateComponent http://localhost:3000/static/js/bundle.js:101405:5
receiveComponent http://localhost:3000/static/js/bundle.js:101367:5
receiveComponent http://localhost:3000/static/js/bundle.js:12202:5
updateChildren http://localhost:3000/static/js/bundle.js:99522:9
_reconcilerUpdateChildren http://localhost:3000/static/js/bundle.js:104450:11
_updateChildren http://localhost:3000/static/js/bundle.js:104554:26
updateChildren http://localhost:3000/static/js/bundle.js:104541:7
_updateDOMChildren http://localhost:3000/static/js/bundle.js:101587:7
updateComponent http://localhost:3000/static/js/bundle.js:101405:5
receiveComponent http://localhost:3000/static/js/bundle.js:101367:5
receiveComponent http://localhost:3000/static/js/bundle.js:12202:5
updateChildren http://localhost:3000/static/js/bundle.js:99522:9
_reconcilerUpdateChildren http://localhost:3000/static/js/bundle.js:104450:11
_updateChildren http://localhost:3000/static/js/bundle.js:104554:26
updateChildren http://localhost:3000/static/js/bundle.js:104541:7
_updateDOMChildren http://localhost:3000/static/js/bundle.js:101587:7
updateComponent http://localhost:3000/static/js/bundle.js:101405:5
receiveComponent http://localhost:3000/static/js/bundle.js:101367:5
receiveComponent http://localhost:3000/static/js/bundle.js:12202:5
updateChildren http://localhost:3000/static/js/bundle.js:99522:9
_reconcilerUpdateChildren http://localhost:3000/static/js/bundle.js:104450:11
SelectInput works just fine. Why?
I really appreciate any help. This has been troubling me for days.