I am new in Material UI and try to replace my Select combo with Autocomplete. For now i maked to load proper value and save it in SQL Server DB but i don't know what and how to put in value property to visualize of component to load and select proper value. Data From this combo will save in insurance.autoUserId
interface IState {
insurance: InsuranceModel;
autoUsers: Array<AutoUserModel>;
autoUserDropdown: Array<DropdownModelCombo>;
autoUserSelectedValue:Array<DropdownModelCombo>;
}
constructor(props: IProps) {
super(props);
this.state = {
insurance: props.currentInsurance,
autoUsers: new Array<AutoUserModel>(),
autoUserDropdown: new Array<DropdownModelCombo>(),
autoUserSelectedValue: new Array<DropdownModelCombo>(),
};
}
ComponentDidMount
this.autoUserService.getAllActiveAutoUsers().then(
(data: any) => {
const autoUserDropdown1 : Array<DropdownModelCombo> = [];
data.map(autoUser => {
autoUserDropdown1.push({
value:autoUser.autoUserId,
label:autoUser.autoUserName
}
)
});
this.setState({
isLoading: false,
autoUsers: data,
autoUserDropdown: autoUserDropdown1,
});
})
.catch(error => {
this.snackbar.show({ severity: 'error', summary: error.message });
this.setState({
isLoading: false
});
});
Autocomplete Compopent
<Autocomplete
disablePortal
id="combo-box-demo"
value={?????}
options={autoUserDropdown}
sx={{ width: 300 }}
onChange={(e, value) => this.handleChangeSelectAutoComplete( e, value, 'autoUserId')}
renderInput={(params) => <TextField {...params} label="AutoUser" />}
/>
I found a solution. I must to return DropdownModelCombo object with proper data that i get from autoUsers where autoUserId is equal to this.state.insurance.autoUserId
const autoUserval: DropdownModelCombo ={value: 0, label: ""};
const id = this.state.insurance.autoUserId;
data.map(autoUser => {
if(autoUser.autoUserId===id)
{
autoUserval.value = autoUser.autoUserId;
autoUserval.label = autoUser.autoUserName;
}
});
this.setState({autoUserValue: autoUserval});