From a217a387c64f34d6949ee770e4f39fca0863c0e0 Mon Sep 17 00:00:00 2001
From: kialam <digitalanime@gmail.com>
Date: Sat, 22 Dec 2018 09:03:44 -0500
Subject: [PATCH] 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                                    | 11 +++++++++--
 src/components/AnsibleSelect/AnsibleSelect.jsx | 15 ++++++++++++++-
 2 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index c39aa1df05..361c84ec34 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -79,6 +79,8 @@ class App extends React.Component {
     const isNavOpen = typeof window !== 'undefined' && window.innerWidth >= parseInt(breakpointMd.value, 10);
     this.state = {
       isNavOpen,
+      config: {},
+      error: false,
     };
   }
 
@@ -93,9 +95,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;
diff --git a/src/components/AnsibleSelect/AnsibleSelect.jsx b/src/components/AnsibleSelect/AnsibleSelect.jsx
index 001e83853b..f3da0b4595 100644
--- a/src/components/AnsibleSelect/AnsibleSelect.jsx
+++ b/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">