React-Admin Change values to custom values in the SelectInput

Question

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?

MaxAlex · Accepted Answer · 2019-07-25 03:00:16Z

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>

answered Jul 25, 2019 at 3:00

MaxAlex

3,4181 gold badge18 silver badges17 bronze badges

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

Comments

John Barbosa · Accepted Answer · 2019-08-05 18:09:13Z

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.

answered Aug 5, 2019 at 18:09

John Barbosa

932 silver badges8 bronze badges

Collectives™ on Stack Overflow

React-Admin Change values to custom values in the SelectInput

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related