title: .map() only displaying the last item from array
body: <p>I want to use the Citybik.es API (<a href="http://api.citybik.es/" rel="nofollow noreferrer">http://api.citybik.es/</a>) to show data on a Leaflet map.</p>
  
  <p>At the moment, the code is only showing the last item from the <code>bikeData.map()</code>, inside the render function. </p>
  
  <p><a href="https://i.stack.imgur.com/86KGI.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/86KGI.jpg" alt="enter image description here"></a></p>
  
  <p>The <code>console.log(data)</code> is showing every iterated item from the <code>bikeData.map()</code>, but only displaying the last item. </p>
  
  <p><a href="https://i.stack.imgur.com/IIJOp.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/IIJOp.jpg" alt="enter image description here"></a></p>
  
  <p>I am looking for something like this.</p>
  
  <p>What am I missing?</p>
  
  <p>The response looks something like this:</p>
  
  <pre><code>{
    "networks": [
    {
      "company": [
        "Bike U Sp. z o.o."
      ], 
      "href": "/v2/networks/bbbike", 
      "id": "bbbike", 
      "location": {
        "city": "Bielsko-Bia\u0142a", 
        "country": "PL", 
        "latitude": 49.8225, 
        "longitude": 19.044444
      }, 
      "name": "BBBike"
    }, 
    {
      "company": [
        "PBSC", 
        "Alta Bicycle Share, Inc"
      ], 
      "href": "/v2/networks/melbourne-bike-share", 
      "id": "melbourne-bike-share", 
      "location": {
        "city": "Melbourne", 
        "country": "AU", 
        "latitude": -37.814107, 
        "longitude": 144.96328
      }, 
      "name": "Melbourne Bike Share"
    }
  }
  </code></pre>
  
  <p>Here's the JavaScript:</p>
  
  <pre><code>import React, { Component } from 'react';
  import L from 'leaflet';
  import { Map, TileLayer, Marker, Popup } from 'react-leaflet';
  
  // code for map marker icon
  var myIcon = L.icon({
      iconUrl: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAApCAYAAADAk4LOAAAFgUlEQVR4Aa1XA5BjWRTN2oW17d3YaZtr2962HUzbDNpjszW24mRt28p47v7zq/bXZtrp/lWnXr337j3nPCe85NcypgSFdugCpW5YoDAMRaIMqRi6aKq5E3YqDQO3qAwjVWrD8Ncq/RBpykd8oZUb/kaJutow8r1aP9II0WmLKLIsJyv1w/kqw9Ch2MYdB++12Onxee/QMwvf4/Dk/Lfp/i4nxTXtOoQ4pW5Aj7wpici1A9erdAN2OH64x8OSP9j3Ft3b7aWkTg/Fm91siTra0f9on5sQr9INejH6CUUUpavjFNq1B+Oadhxmnfa8RfEmN8VNAsQhPqF55xHkMzz3jSmChWU6f7/XZKNH+9+hBLOHYozuKQPxyMPUKkrX/K0uWnfFaJGS1QPRtZsOPtr3NsW0uyh6NNCOkU3Yz+bXbT3I8G3xE5EXLXtCXbbqwCO9zPQYPRTZ5vIDXD7U+w7rFDEoUUf7ibHIR4y6bLVPXrz8JVZEql13trxwue/uDivd3fkWRbS6/IA2bID4uk0UpF1N8qLlbBlXs4Ee7HLTfV1j54APvODnSfOWBqtKVvjgLKzF5YdEk5ewRkGlK0i33Eofffc7HT56jD7/6U+qH3Cx7SBLNntH5YIPvODnyfIXZYRVDPqgHtLs5ABHD3YzLuespb7t79FY34DjMwrVrcTuwlT55YMPvOBnRrJ4VXTdNnYug5ucHLBjEpt30701A3Ts+HEa73u6dT3FNWwflY86eMHPk+Yu+i6pzUpRrW7SNDg5JHR4KapmM5Wv2E8Tfcb1HoqqHMHU+uWDD7zg54mz5/2BSnizi9T1Dg4QQXLToGNCkb6tb1NU+QAlGr1++eADrzhn/u8Q2YZhQVlZ5+CAOtqfbhmaUCS1ezNFVm2imDbPmPng5wmz+gwh+oHDce0eUtQ6OGDIyR0uUhUsoO3vfDmmgOezH0mZN59x7MBi++WDL1g/eEiU3avlidO671bkLfwbw5XV2P8Pzo0ydy4t2/0eu33xYSOMOD8hTf4CrBtGMSoXfPLchX+J0ruSePw3LZeK0juPJbYzrhkH0io7B3k164hiGvawhOKMLkrQLyVpZg8rHFW7E2uHOL888IBPlNZ1FPzstSJM694fWr6RwpvcJK60+0HCILTBzZLFNdtAzJaohze60T8qBzyh5ZuOg5e7uwQppofEmf2++DYvmySqGBuKaicF1blQjhuHdvCIMvp8whTTfZzI7RldpwtSzL+F1+wkdZ2TBOW2gIF88PBTzD/gpeREAMEbxnJcaJHNHrpzji0gQCS6hdkEeYt9DF/2qPcEC8RM28Hwmr3sdNyht00byAut2k3gufWNtgtOEOFGUwcXWNDbdNbpgBGxEvKkOQsxivJx33iow0Vw5S6SVTrpVq11ysA2Rp7gTfPfktc6zhtXBBC+adRLshf6sG2RfHPZ5EAc4sVZ83yCN00Fk/4kggu40ZTvIEm5g24qtU4KjBrx/BTTH8ifVASAG7gKrnWxJDcU7x8X6Ecczhm3o6YicvsLXWfh3Ch1W0k8x0nXF+0fFxgt4phz8QvypiwCCFKMqXCnqXExjq10beH+UUA7+nG6mdG/Pu0f3LgFcGrl2s0kNNjpmoJ9o4B29CMO8dMT4Q5ox8uitF6fqsrJOr8qnwNbRzv6hSnG5wP+64C7h9lp30hKNtKdWjtdkbuPA19nJ7Tz3zR/ibgARbhb4AlhavcBebmTHcFl2fvYEnW0ox9xMxKBS8btJ+KiEbq9zA4RthQXDhPa0T9TEe69gWupwc6uBUphquXgf+/FrIjweHQS4/pduMe5ERUMHUd9xv8ZR98CxkS4F2n3EUrUZ10EYNw7BWm9x1GiPssi3GgiGRDKWRYZfXlON+dfNbM+GgIwYdwAAAAASUVORK5CYII=',
      iconSize: [25, 41],
      iconAnchor: [12.5, 41],
      popupAnchor: [0, -41]
  });
  
  class App extends Component {
      state = {
          location: {
              lat: 51.505,
              lng: -0.09,
          },
          bikeData: [],
          zoom: 2,
      }
  
      //lifecycle method to get the bike information
      componentDidMount() {
  
          fetch('https://api.citybik.es/v2/networks')
              .then(res =&gt; res.json())
              .then(response =&gt; {
                  const networkData = response.networks;
                  networkData.map((data) =&gt; {
                      console.log(data)
                      this.setState({
                          bikeData: [data]
                      });
                  })
              })
      }
  
  
      render() {
          const position = [this.state.location.lat, this.state.location.lng]
          const bikeData = this.state.bikeData;
          return (
              &lt;Map className="map" center={position} zoom={this.state.zoom}&gt;
                  &lt;TileLayer
                      attribution="&amp;amp;copy &lt;a href=&amp;quot;http://osm.org/copyright&amp;quot;&gt;OpenStreetMap&lt;/a&gt; contributors"
                      url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
                  /&gt;
                  {
                      bikeData &amp;&amp; bikeData.map((data) =&gt; {
                          console.log(data)
                          return (
                              &lt;Marker
                                  icon={myIcon}
                                  key={data.id}
                                  position={[data.location.latitude, data.location.longitude]}&gt;
                                  &lt;Popup&gt;
                                      Name: {data.name} &lt;br /&gt;
                                      Station Details: {[data.location.city, data.location.country]}
                                  &lt;/Popup&gt;
                              &lt;/Marker&gt;
                          )
                      }) 
                  }
              &lt;/Map&gt;
          )
      }
  }
  
  ReactDOM.render(&lt;App/&gt;,
      document.getElementById('root')
  );
  </code></pre>