CODEWITHSUNDEEP
react-adminselectinput
John Barbosa
John Barbosa

Reputation: 93

React-Admin Change values to custom values in the SelectInput

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?

Upvotes: 2

Views: 1556

Answers (2)

John Barbosa
John Barbosa

Reputation: 93

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.

Upvotes: 0

MaxAlex
MaxAlex

Reputation: 3319

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>

Upvotes: 1

Related Questions