Binding React-Admin ReferenceInput with SelectInput to render on DOM

Question

I have two endpoints

api/instruction api/subject

from my server, model Instructions has a reference field called subject.

On my react-admin frontend, I'd like to CREATE(CRUD) a new Instruction instance.

Following this tutorial I have implemented my InstructionCreate as below

export const InstructionCreate = (props) => (
    <Create  title="New Instruction"{...props}>
        <SimpleForm>
             <ReferenceInput label="Subject" source="subject" reference="subject/">
                <SelectInput optionText="name" />
            </ReferenceInput>   
        </SimpleForm>
    </Create>

When I render my Create component, from chrome console, under networktab, I can see a list of subject objects returned.

The list has two objects(pulled from server) and the objects have a property 'name'

However, i get a console error

Uncaught TypeError: Cannot read property 'data' of undefined

The above error occurred in the

In case one needs my app.js, from which I can successfully CRUD the api/subject endpoint

const App = () => (    
     <Admin 
         dataProvider={dataProvider}  

         <Resource name="subject" title="Subjects" list={SubjectList} create={SubjectCreate} edit={SubjectEdit}  icon={GroupIcon}/>
         <Resource name="instruction" title="Instructions" list={InstructionList} edit={InstructionEdit} create={InstructionCreate} icon={InstructionIcon}/>

     </Admin>
     );

GET api/subject - returns a list of dictionaries

[ { "id": 2, "name": "Subject 2" }, { "id": 1, "name": "Subject 1" } ]

Which data provider are you using? It looks like it does not correctly return its data — Gildas Garcia
– Gildas Garcia, Commented Sep 2, 2018 at 18:25
@GildasGarcia Hello again mate? This is what am using. >ra-data-simple-rest Please clarify what you mean by your response, that it does not return its data — ChampR
– ChampR, Commented Sep 2, 2018 at 20:19
Can you post an extract of your API response for this specific query? It might be because it is not in the format expected by the ra-data-simple-rest provider — Gildas Garcia
– Gildas Garcia, Commented Sep 3, 2018 at 7:33

ChampR · Accepted Answer · 2018-09-06 06:19:30Z

1

I was able to solve this. The error was on my side for including a trailing '/' on the reference var

Changed this line

<ReferenceInput label="Subject" source="subject" reference="subject/">

to

<ReferenceInput label="Subject" source="subject" reference="subject">

answered Sep 6, 2018 at 6:19

ChampR

7827 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Binding React-Admin ReferenceInput with SelectInput to render on DOM

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related