.map() only displaying the last item from array - json

Question

I want to use the Citybik.es API (http://api.citybik.es/) to show data on a Leaflet map.
At the moment, the code is only showing the last item from the bikeData.map(), inside the render function.
The console.log(data) is showing every iterated item from the bikeData.map(), but only displaying the last item.
I am looking for something like this.
What am I missing?
The response looks something like this:
{
"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"
}
}
Here's the JavaScript:
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 => res.json())
.then(response => {
const networkData = response.networks;
networkData.map((data) => {
console.log(data)
this.setState({
bikeData: [data]
});
})
})
}
render() {
const position = [this.state.location.lat, this.state.location.lng]
const bikeData = this.state.bikeData;
return (
<Map className="map" center={position} zoom={this.state.zoom}>
<TileLayer
attribution="&copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors"
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
{
bikeData && bikeData.map((data) => {
console.log(data)
return (
<Marker
icon={myIcon}
key={data.id}
position={[data.location.latitude, data.location.longitude]}>
<Popup>
Name: {data.name} <br />
Station Details: {[data.location.city, data.location.country]}
</Popup>
</Marker>
)
})
}
</Map>
)
}
}
ReactDOM.render(<App/>,
document.getElementById('root')
);

Answer 1

You're repeatedly overwriting the bikeData state item:
fetch('https://api.citybik.es/v2/networks')
.then(res => res.json())
.then(response => {
const networkData = response.networks;
networkData.map((data) => {
console.log(data)
this.setState({ // ***
bikeData: [data] // *** Here
}); // ***
})
})
It's not clear why you're using map there at all; certainly, map is the wrong tool if you're not going to return a value from the callback and not going to use the array map creates.
I can't say for sure, but it seems like you just want to use networkData directly:
fetch('https://api.citybik.es/v2/networks')
.then(res => res.json())
.then(response => {
const networkData = response.networks;
this.setState({bikeData: networkData});
})
Note that I'm assuming you want to overwrite bikeData with the result, not add to it.
Or if you want to transform that data in some way, you'd use the result of map:
fetch('https://api.citybik.es/v2/networks')
.then(res => res.json())
.then(response => {
const networkData = response.networks;
this.setState({
bikeData: networkData.map((data) => {
return /*...do something to data...*/;
})
});
})
(Same assumption.)
To add to bikeData, you'd need to use the callback form of setState:
this.setState(({bikeData}) => ({
bikeData: [...bikeData, ...networkData.map((data) => {
return /*...do something to data...*/;
})]
});
Also note that you have an error in your fetch call (you're not alone, a lot of people do this, so many I wrote it up on my anemic little blog): You haven't checked res.ok:
fetch('https://api.citybik.es/v2/networks')
.then(res => { // ***
if (!res.ok) { // ***
throw new Error(res.status); // ***
} // ***
}) // ***
.then(res => res.json())
.then(response => {
// ...

Answer 2

Try this:
componentDidMount() {
fetch('https://api.citybik.es/v2/networks')
.then(res => res.json())
.then(response => {
const networkData = response.networks; //which is currently an array
this.setState({
bikeData: networkData
});
})
}

Answer 3

You are not recommended to do setState inside loop. So do setState outside the loop. Also the way you push data into array isn't correct. Try below solution
const bikeDataArray = this.state.bikeData;
networkData.map(data => {
console.log(data)
bikeDataArray.push(data);
})
this.setState({
bikeData: bikeDataArray
});