Use new lifecycle method to update component state.

- Use component state to handle rendering of Ansible Select dropdown based on the number of custom virtualenvs the API returns.

src/App.jsx

@@ -76,6 +76,8 @@ class App extends React.Component {
     const isNavOpen = typeof window !== 'undefined' && window.innerWidth >= parseInt(breakpointMd.value, 10);
     this.state = {
       isNavOpen,
+      config: {},
+      error: false,
     };
   }
 
@@ -94,9 +96,14 @@ class App extends React.Component {
 
   async componentDidMount() {
     // Grab our config data from the API and store in state
-    const { data } = await api.get(API_CONFIG);
-    this.setState({ config: data });
+    try {
+      const { data } = await api.get(API_CONFIG);
+      this.setState({ config: data });
+    } catch (error) {
+      this.setState({ error });
+    }
   }
+
   render() {
     const { isNavOpen, config } = this.state;
     const { logo, loginInfo, history } = this.props;

src/components/AnsibleSelect/AnsibleSelect.jsx

@@ -12,12 +12,25 @@ class AnsibleSelect extends React.Component {
     this.onSelectChange = this.onSelectChange.bind(this);
   }
 
+  state = {
+    count: 1,
+  }
+
+  static getDerivedStateFromProps(nexProps, _) {
+    if (nexProps.data) {
+      return {
+        count: nexProps.data.length,
+      }
+    }
+    return null;
+  }
   onSelectChange(val, _) {
     this.props.selectChange(val);
   }
 
   render() {
-    if (this.props.data.length > 1) {
+    const { count } = this.state;
+    if (count > 1) {
       return (
         <FormGroup label={this.props.labelName} fieldId="ansible-select">
           <Select value={this.props.selected} onChange={this.onSelectChange} aria-label="Select Input">