Using TextInput inside ReferenceInput

Question

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?

Gildas Garcia · Accepted Answer · 2021-10-15 07:59:41Z

1

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>

answered Oct 15, 2021 at 7:59

Gildas Garcia

7,0663 gold badges18 silver badges29 bronze badges

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

2 Comments

Darren Ng Over a year ago

Thanks for the reply, unfortunately SelectInput doesn't allow me to type free text and save it. In the end I wrote my own Input Component so that I can use a TextInput.

Gildas Garcia Over a year ago

You know about the AutocompleteInput? It supports inline creation as well

Collectives™ on Stack Overflow

Using TextInput inside ReferenceInput

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related