Search code examples
react-admin

Fields inside a ReferenceManyInput have empty values


I am trying <ReferenceManyInput> with a setup similar to the docs example. My inputs are rendered, but all of them have empty values, although related records themselves are fetched correctly. What could be wrong?

My edit component:

const CourseEdit = () => {
    return (
        <Edit mutationMode="optimistic">
            <SimpleForm>
                ...
                <ReferenceManyInput reference="prices" target="course">
                    <SimpleFormIterator inline>
                        <TextInput name="label" source="label" />
                        <NumberInput name="value" source="value" />
                        <BooleanInput name="defaultPrice" source="defaultPrice" />
                    </SimpleFormIterator>
                </ReferenceManyInput>
                ...
            </SimpleForm>
        </Edit>
    );
}

This is the API response for this page:

{
  "@context": "/api/contexts/Course",
  "@id": "/api/courses/59",
  "@type": "Course",
  "created": "2023-08-11T04:59:07+02:00",
  "updated": "2023-09-24T20:26:57+02:00",
  "mentor": {
    "@id": "/api/mentors/55",
    "@type": "Mentor",
    ...
  },
  "dateStart": "2024-06-17T00:00:00+02:00",
  "dateEnd": "2024-06-20T00:00:00+02:00",
  "venue": {
    "@id": "/api/venues/34",
    "@type": "Venue",
    ...
  },
  "published": false,
  "availability": "available",
  "prices": [
    {
      "@id": "/api/prices/115",
      "@type": "Price",
      "created": "2023-09-16T21:08:57+02:00",
      "updated": "2023-09-24T20:26:57+02:00",
      "label": "3 lessons",
      "value": 49900,
      "defaultPrice": true
    },
    {
      "@id": "/api/prices/116",
      "@type": "Price",
      "created": "2023-07-12T20:07:39+02:00",
      "updated": "2023-09-24T20:26:57+02:00",
      "label": "4 lessons",
      "value": 64900,
      "defaultPrice": false
    }
  ]
}

I don't really have a knowledge how (or what) I should debug in a React app, but I can see, that a context provider that wraps the <SimpleFormIterator> has all the correct values, while the inputs further down the tree do not:

context provider

field

I was expecting to be able to edit related record in the editing screen of the parent record, as described in the docs. Actual result is – all the input fields of related records are displayed with empty values.


Solution

  • The problem was solved by removing name attribute from the input components inside the iterator. React Admin uses name internally, so by having it in my code I was breaking the RA's internal handling of it.