reactjsmaterial-uiautocomplete

How to load proper value in Material UI Autocomplete from DB


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" />}
/>

Solution

  • 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});