REACT - Dropdown values not updating dynamically

Question

I am new to React so this question might be a little dumb. I am trying to get the dropdown values from backend. The problem I'm facing is that the program is not filling the list with the items even after the async-await function returns the items. Any help would be appreciated.

Code for loading data from backend:-

getDataSources = async () => {
    try {
        return await axios.post("http://localhost:5000/configure_get_sources",
            {
                headers: {
                    "content-type": "application/json"
                }
            }
        );
    }
    catch (e) {
        console.log(e);
    }
};

For the dropdown, I have the code mentioned below:-

        var selectSources = [];

        this.getDataSources().then((res) => {
            for (var i = 0; i < res.data.length; i++) {
                selectSources.push("<option value='" + res.data[i] + "'>" + res.data[i] + "</option>");
            };
        });

    

    return (
             <div className="container">
                  <div className="row">
                       <label className="col-md-4" >Data Source: </label>
                           <select className="col-md-7">
                            {
                              selectSources.map(id =>
                                <option key={id} value={id}>{id}</option>
                              )
                            }
                           </select>
                   </div>
              </div
      );

Do your data fetching in componentDidMount by updating the result into your state with setState and use selectSources from this.state. — cbr
– cbr, Commented Jun 24, 2020 at 13:48
try catch will not be able to handle API call errors, you need to use the .then() and .catch() methods in the axios promise. — M0nst3R
– M0nst3R, Commented Jun 24, 2020 at 13:48

silencedogood · Accepted Answer · 2020-06-24 14:02:12Z

1

You'll need to save the options in state in order to re-render the component upon retrieval of the options. Also, you should grab the options in componentDidMount lifecycle method. Try out something like this:

Add state

    this.state = {
        options: []
    }

Use componentDidMount

componentDidMount() {
    axios.post("http://localhost:5000/configure_get_sources",
        {
            headers: {
                "content-type": "application/json"
            }
        }
    ).then(res => {
       this.setState({options: res.data});
    }); 

}

This is assuming that res.data is returned as an array, and not an object containing an array.

Render method

let renderedOptions = this.state.options.map((item, i) => {
      return (
          <option value={item} key={i}>{item}</option>
       )
 });



return (
         <div className="container">
              <div className="row">
                   <label className="col-md-4" >Data Source: </label>
                       <select className="col-md-7">
                        { renderedOptions }
                       </select>
               </div>
          </div
  );

edited Jun 24, 2020 at 14:02

answered Jun 24, 2020 at 13:51

silencedogood

3,3291 gold badge16 silver badges38 bronze badges

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

2 Comments

Syed Samad Shakeel Over a year ago

Since this dropdown is inside a Modal, if I close the Modal and reopen it, the Modal Component will not remount and reload the new data sources. Is there anyway I can unmount the modal component on close so that I can mount again everytime?

silencedogood Over a year ago

Short answer is yes. However, you should post another question for this issue, showing the code for your modal window, along with the parent component. Reason being, there are many potential answers depending on how your components are set up.

Collectives™ on Stack Overflow

REACT - Dropdown values not updating dynamically

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related