CODEWITHSUNDEEP
react-admin
Darren Ng
Darren Ng

Reputation: 373

Using TextInput inside ReferenceInput

My backend looks like this:

table1

id | lotsofothercolumns | problemID
-----------------------------------
 1 | blah blah          |     1

table2 (which is basically a mapping table)

id | problemID | resolutionSteps
-----------------------------------
 1 |     1     | "do this do that"

In App.tsx, I have added both resource:

<Resource name="table1" list={Table1List} edit={Table1Edit} />
<Resource name="table2" />

In Table1Edit, I tried to display the resolutionSteps from table2

<Edit>
    <SimpleForm>
        <ReferenceInput source="problemID" reference="table2">
            <TextInput source="resolutionSteps" />
        </ReferenceInput>
        ...
        //display lots of stuff from table1, all no issue
        ...
    </SimpleForm>
</Edit>

Unfortunately, it doesn't display 'do this do that', instead it simply displays '1' and gives an error 'Associated reference no longer appears to be available'. Everything other column from table1 is displayed correctly so the plumbing from frontend to backend should be working. I read the react-admin documentation and it seems that ReferenceInput can only be used with Inputs that supports choices, so how do I display resolutionSteps in this case?

Upvotes: 0

Views: 242

Answers (1)

Gildas Garcia
Gildas Garcia

Reputation: 7066

All choices inputs accepts an optionText prop which allows you to specify which field should be used for the option text:

<Edit>
    <SimpleForm>
        <ReferenceInput source="problemID" reference="table2">
            <SelectInput optionText="resolutionSteps" />
        </ReferenceInput>
        ...
        //display lots of stuff from table1, all no issue
        ...
    </SimpleForm>
</Edit>

Upvotes: 1

Related Questions