CODEWITHSUNDEEP
javascriptreactjsmaterial-ui
Ahmad Sami
Ahmad Sami

Reputation: 327

ReactJs get id instead of value from Material UI Autocomplete

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.

Upvotes: 5

Views: 11471

Answers (1)

Daniel Baldi
Daniel Baldi

Reputation: 920

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.

Upvotes: 13

Related Questions