2

I have the following code that I'm using in react-admin: 

<ReferenceInput label="Animal" source="id"reference="animal">
   <SelectInput optionText="type" choices={[ {id: '0', name: 'Cat' }, { id: '1', name: 'Dog'},]}/>
</ReferenceInput>

In that code it receive from my database the values '0' to a Cat and '1' to a dog and when I click in the dropDown it's show '0' and '1', but I want to show only Cat and Dog instead of '0' and '1' in my SelectInput.

I tried to use: choices={[ {id: '0', name: 'Cat' }, { id: '1', name: 'Dog'},]}, but had no effect in the dropdown.

Does anyone know how I can do this?

Cœur
  • 37,241
  • 25
  • 195
  • 267
John Barbosa
  • 83
  • 1
  • 8

2 Answers2

1

You can pass in the optionText prop your function of displaying the selected record instead of the string with the field name:

<ReferenceInput label="Animal" source="id" reference="animal">
   <SelectInput optionText={ choice => choice.type === 0 ? 'Cat' : 'Dog' }/>
</ReferenceInput>
MaxAlex
  • 2,919
  • 1
  • 14
  • 14
0

I found out what my problem was.

The value coming from the database was just a numeric value (0, 1) and I was using ('0', '1'). And the SelectInput could not use the correct value to display in DropDown because of that.

The right way should be like this: 

<SelectInput 
 optionText = "type" 
 choices = {[{id: 0, name: 'Cat'}, {id: 1, name: 'Dog'},]} 
/>

Where numeric values do not use quotation.

John Barbosa
  • 83
  • 1
  • 8