title: React - Loading data before render
body: <p>I'm new to react and I have a question about a best practice that sees me make a mistake .
  I call an API to retrieve information and modify an array in the state once the response is returned by the API. In the "render" I have to retrieve the information from this array (when it is completed) or <strong>it sends me back an error because the array is empty when the render is initialized.</strong></p>
  
  <pre><code>class MyClass extends React.Component {
    constructor(props) {
      super(props)
      this.state = {
        activeIndex: 0,
        items: []
      }
    }
  
    componentDidMount() {
      axios
        .get(`API_ADDRESS`, {
          headers: {
            Authorization: `Token XXX`,
          },
        })
        .then(function(response) {
          this.setState({
            items: response.results,
          })
        })
        .catch(error =&gt; {
          notification.warning({
            message: error.code,
            description: error.message,
          })
        })
    }
  
    changeDialog = (e, index) =&gt; {
      e.preventDefault()
      this.setState({
        activeIndex: index,
      })
    }
  
    render() {
      const { activeIndex, items } = this.state
      const {
        first_name: firstName,
        last_name: lastName,
        phone,
        email,
        address,
      } = items[activeIndex]
  </code></pre>
  
  <p>The error indicates :</p>
  
  <blockquote>
    <p>TypeError: _items$activeInde is undefined</p>
  </blockquote>
  
  <p><strong>How can I solve this error related to data loading? (trying to keep the destrying elements method)</strong></p>
  
  <p>Thanks a lot 
  Eliott</p>