title: how to populate options for a react select by fetching values from an api to be visible when you click on the select box?
body: <p>I am using react-select for drop downs in my application. Below is my requirement.</p>
  
  <ul>
  <li>Select a value from the drop down for the first Select component(second Select is not rendered yet).</li>
  <li>Basing on the selected value fetch the options for second Select component and render the second Select box.</li>
  <li><p>Click in the text area of the second Select.</p></li>
  <li><p>What is happening : I see No Options as the default drop down. I can
  see the values from the API only when I type something in the box and
  that matches the default filter criteria.  </p></li>
  </ul>
  
  <p>What I want to happen : It
     should display the values that we fetched from the API call.</p>
  
  <pre><code>const options = [{ label: "first", value: "first" }];
  let options1 = [];
  
  async function copyOptionsForAsync() {
    let response = await fetch("https://jsonplaceholder.typicode.com/todos");
    let data = await response.json();
    data.forEach(element =&gt; {
      let dropDownEle = { label: element["title"], value: element };
      options1.push(dropDownEle);
    });
  }
  
  class App extends React.Component {
    constructor() {
      super();
      this.state = {
        isSelected: false
      };
    }
    handleOnchange = () =&gt; {
      this.setState({ isSelected: true });
      copyOptionsForAsync();
      console.log(options1);
    };
    render() {
      return (
        &lt;div className="App"&gt;
          &lt;Select
            name="option"
            options={options}
            onChange={this.handleOnchange}
          /&gt;
          {this.state.isSelected ? &lt;App1 /&gt; : null}
        &lt;/div&gt;
      );
    }
  }
  class App1 extends React.Component {
    render() {
      return (
        &lt;div className="App"&gt;
          &lt;Select name="options2" options={options1} /&gt;
        &lt;/div&gt;
      );
    }
  }
  
  const rootElement = document.getElementById("root");
  ReactDOM.render(&lt;App /&gt;, rootElement);
  </code></pre>
  
  <p>This is the link to <a href="https://codesandbox.io/s/540xlzmy9p" rel="nofollow noreferrer">codesandbox page</a>. Can any one tell me how will I be able to display the options once I click on the select box.</p>