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.
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.