Load dropdownlist data from api in reactjs - reactjs

Question

I am new to react js and once again got stuck in an issue. I am trying to load a dropdown list from an api call. Although I am able to get data from API and save it to state, I am not able to use it to bind it to the dropdown list. Following is my code to fetch and bind the data:
const initialState = {
venues: []
};
export default class AddLab extends Component {
constructor() {
super();
this.state = initialState;
this.getVenueList();
this.handleChange = this.handleChange.bind(this);
}
getVenueList() {
ApiService.getData(apiConfig.GET_VENUES, {}).then((res) => {
if (res.data && res.data.error == null) {
this.state.venues = res.data.result;
console.log(this.state.venues);
} else {
alert(res.data.error.description );
}
});
}
render() {
return (
<div className="card col-md-4">
<Row>
<Col>
<Form.Label>Venue</Form.Label>
<Form.Control as="select" componentclass="select" placeholder="Select venue" onChange={this.handleVenueChange}>
<option value="select">Select venue</option>
{
this.state.venues.map((venue) => {
return (<option value="s">{venue.venueName}</option>);
})
}
{/* <option value={apiConfig.ROLE_ADMIN}>Admin</option> */}
{/* <option value={apiConfig.ROLE_CLIENT}>Client</option> */}
</Form.Control>
<div style={{ fontSize: 12, color: "red" }}>
{this.state.projectIdError}
</div>
</Col>
</Row>
{this.state.isLoading ? (<div style={{
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
height: '100vh'
}}><div className="spinner-border text-primary" role="status" >
<span className="sr-only">Loading...</span>
</div></div>) : (<div></div>
)}
<div style={divStyle}>
<Button type="submit" name="submit" className="btn btn-primary mb-2">
Submit
</Button>
</div>
</div>
</Form>
</div>
);
}
}
I am able to get data from api in my getVenueList method but even when setting it to state, the dropdown list is not updated.

Answer 1

You are not updating the state correctly, in your getVenue method set state as following:
this.setState({
venues: res.data.result
});