Load dropdownlist data from api in 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.

pankaj · Accepted Answer · 2020-10-30 11:43:43Z

1

You are not updating the state correctly, in your getVenue method set state as following:

this.setState({
                venues: res.data.result
              });

answered Oct 30, 2020 at 11:43

pankaj

8,47816 gold badges75 silver badges119 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Load dropdownlist data from api in reactjs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related