title: Accessing JavaScript Array returns "undefined"
body: <p>I'm building a simple app in pure Reactjs. Component I'm having problems is a component that is supposed to render a number of buttons by mapping an array that has previously been populated by fetching some data from an external API. This array is populated within a class method and the results are eventually copied onto another array which is part of the state of the component</p>
  
  <p>When I console.log the contents of the array on the render method of my component, everything looks fine. However if I try to print a specific element by its index, "undefined" is printed on the console. As a result the map function does not render all the desired buttons.</p>
  
  <p>I have managed to find different documentation around the way I'm populating the array but none of the articles so far suggest that I'm doing anything fundamentally wrong. At least not that I can see.</p>
  
  <p>State stores an empty array to start with and within the componentWillMount method an API gets called that fetches data and updates the array as per the below:</p>
  
  <pre><code>this.state = {
        resources: []
  }
  
  getAPIavaiableResources(api_resource) {
      let buttonsArray = []
      fetch(api_resource)
        .then(response =&gt; response.json())
        .then(data =&gt; {
          for (let i in data) {
            buttonsArray.push({id: i, name: i, url: data[i]})
          }
        }).catch(error =&gt; console.log(error))
  
      this.setState({resources: buttonsArray})
  }
  
  componentWillMount() {
      this.getAPIavaiableResources(ROOT_RESOURCE)
  }
  
  render() {
      const { resources } = this.state;
      console.log(resources)
      console.log(resources[0])
  
      return (
        &lt;div className="buttons-wrapper"&gt;
          {
            resources.map(resource =&gt; {
              return &lt;Button
                        key={resource.id}
                        text={resource.name} 
                        onClick={this.handleClick} 
                      /&gt;
            })
          }
        &lt;/div&gt;
      )
  }
  </code></pre>
  
  <p>This is what gets printed onto the console on the render method.</p>
  
  <pre><code>[]
  0: {id: "people", name: "people", url: "https://swapi.co/api/people/"}
  1: {id: "planets", name: "planets", url: "https://swapi.co/api/planets/"}
  2: {id: "films", name: "films", url: "https://swapi.co/api/films/"}
  3: {id: "species", name: "species", url: "https://swapi.co/api/species/"}
  4: {id: "vehicles", name: "vehicles", url: "https://swapi.co/api/vehicles/"}
  5: {id: "starships", name: "starships", url: "https://swapi.co/api/starships/"}
  length: 6
  __proto__: Array(0)
  </code></pre>
  
  <p>Can anyone see what I'm doing wrong? I'm pushing an object because I do want an array of objects albeit arrays in Javascript are objects too. Any help would be appreciated.</p>