I am reading the data from database and displaying it in a autocomplete drop down list. When the user clicks on the input field the data is read from the database and response is fetched using axios. While the data is loading the option value in the autocomplete should be 'Loading'. Once data is loaded then the required values should be displayed. The problem is that once the user clicks on the dropdown and he gets the Loading option. However, even when the data is loaded the options do not change and remain as Loading only. For getting the desired options user has to click again on the input field/drop down. Below is the code.
class Colors extends Component{
state={
IsColorListLoaded:false,
colors_List=[]
}
render(){
const getColors=()=>{
//get color list fromthe db using axios
//populates the colors_List and sets IsColorListLoaded to true using setState
}
return(
<input required list="colors" onClick={getColors}
onChange={updateColor} placeholder="Colors"/>
<datalist id="colors" >
{!this.state.IsColorListLoaded?<div><option value=" " readonly>Loading</option></div>:
<div>{this.state.Colors_List.map((e, key) => {
return <option key={key} value={e.VALUE} >{e.VALUE}</option> })
}
</div>
}
</datalist>
)
}
}
Hooks cannot be used due to some compatibility issues.