React-admin: Nested Reference Field

[Jabst]

In order to retrieve the equipment type I am using a that will retrieve the equipment model and then another that references the equipment type using the equipment model's field "typeID" to retrieve the equipment type.

However it displays the following warning:

Warning: Failed prop type: Invalid prop translateChoice of type boolean supplied to ReferenceField, expected function.

The image represents the data model (an equipment has an equipment model, and an equipment model has an equipment type)

[fzaninotto]

Hi, and thanks for your question. As explained in the react-admin contributing guide, the right place to ask a "How To" question, get usage advice, or troubleshoot your own code, is StackOverFlow.

This makes your question easy to find by the core team, and the developer community. Unlike Github, StackOverFlow has great SEO, gamification, voting, and reputation. That's why we chose it, and decided to keep GitHub issues only for bugs and feature requests.

So I'm closing this issue, and inviting you to ask your question at:

http://stackoverflow.com/questions/tagged/react-admin

And once you get a response, please continue to hang out on the react-admin channel in StackOverflow. That way, you can help newcomers and share your expertise!

[lgrote]

Hi,
I have the same issue as @Jabst. I saw he opened a question on StackOverflow which is still unanswered.

I looked into the code for ReferenceField and as far as I understood this is an actual bug. ReferenceField expects a function for the translateChoice property, but internally hands a boolean to ReferenceFieldView. As you @fzaninotto described in #1235 this is intended.
If you nest one ReferenceField into another the inner one receives false as translateChoice property and rightfully complains that it is a boolean and not a function.
To me this seems like a bug considering the statement in the docs

Also, you can use any Field component as child.

Thanks for the great work!

[phacks]

Hi !

I was writing a new issue and found out halfway through that it was similar to this one, so I’m going to comment here instead with what I tried and failed. I’ll keep you updated if any of the solutions posted on StackOverflow solved it for me, and/or if I try to put up a PR for this use case.

---

Hi! I have the following use case and can’t find a proper way to build it with React Admin.

The situation

Let’s say I am building a schedule application for students, that let them know which class is taking place at what time with which teacher.

My (simplified) model looks like this:

So one student is in a class (let’s say, “first grade”) and has many teachers (one for maths, one for history, and so on).

Now, my use case: I would like to be able to edit the “Principal Teacher” of a student on the “Student Edit” view of React Admin. More precisely, I would like to display an <ArrayInput> of all the possible teachers, i.e. all the teachers for the class my student is in.

What I tried so far

Nested <ReferenceInput>s

The setup looks like this:

<ReferenceInput label="Class" source="class_id" reference="classes">
    <ReferenceArrayInput label="Teachers" source="teachers" reference="teachers">
        <SelectInput optionText="Principal teacher" />
    </ReferenceArrayInput>
</ReferenceInput>

I couldn’t find any documentation for this, and I’m not sure it is even _supposed_ to be working, and as a matter of fact it doesn’t. Edit: see the discussion on StackOverflow.

Dynamic FormDataConsumer

The setup looks like this:

getTeachersFor(class) {
    return fetch(myApiUrl/classes/${class})
    .then(data => data.JSON())
}

<FormDataConsumer>
    {({ formData, ...rest }) =>
        <SelectInput
            source="teacher"
            choices={getTeachersFor(formData.class)}
            {...rest}
        />
    }
</FormDataConsumer>

This one does not work neither, however I can’t tell whether my API design is at fault or if the choices attribute cannot accept a promise.

---

Keep you posted!

[batbyR]

Hi Everybody!

I work with @phacks and I found a solution to solve our problem described above.

I used ReferenceFieldController as suggested in the Stack Overflow post linked here.

Here is my solution :

<ReferenceFieldController label="Class" source="class_id" reference="classes"> {({ referenceRecord }) => ( <SelectArrayInput choices={referenceRecord ? referenceRecord.teachers : []} source="principal_teacher" /> )} </ReferenceFieldController>

@fzaninotto Do you think it would be worth documenting this use case, given that ReferenceFieldController is not mentioned in the docs? I can submit a PR.

Let me know!