ReactJs get id instead of value from Material UI Autocomplete

Question

I'm using Material UI Auto complete to get list of countries, and I need to get the selected country id to send back to database.

<Autocomplete
   options={this.state.countries.map(option => option.name_en + ` (${option.name_native})`)}
   id="discountType"
   value={this.state.makeCountry}
   onChange={(e, value) => this.logCountry(e, value)}
   renderInput={(params) =>
   <TextField
      {...params}
      variant="outlined"
      label="Select make country"
   />}
/>

I need to send option.id to logCountry function alongside the value.

Daniel Baldi · Accepted Answer · 2021-11-30 01:56:23Z

13

When creating your options, you can turn them into objects in a format such as:

const options = this.state.countries.map(option => ({ id: option.id, label: option.name_en + ` (${option.name_native})`}));

An then you can access the selected option id using onChange={(e, value) => this.logCountry(e, value.id)}.

I've forked the MUI Autocomplete's docs stackblitz example to implement such behavior, you can check it here.

answered Nov 30, 2021 at 1:56

Daniel Baldi

9205 silver badges10 bronze badges

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

1 Comment

Ahmad Sami Over a year ago

It worked. I just had to use getOptionLabel instead of value. Thank you so much.

Collectives™ on Stack Overflow

ReactJs get id instead of value from Material UI Autocomplete

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related