How fetch data by api and render child component with it - react google maps

Question

I have to files: eventsMapPage.js (main) and Maps.js(child).

getEvents = async () => {
const requestResponse = await request(BASE_API_URL + "/api/events", { method: "GET", headers: {}, body: {} });
this.state.eventList = requestResponse.data;
console.log('getEvents');
console.log(this.state.eventList);
}

//fetching data from api in parent
```getEvents = async () => {
const requestResponse = 
await request(BASE_API_URL + "/api/events", {method:"GET", headers: {}, body: {} });
     this.state.eventList = requestResponse.data;
}
```
//Sent state with fetched data
```
<GoogleApiWrapper eventList={this.state.eventList} ></GoogleApiWrapper>
```

//Send data
```
let markerList = []

export class MapContainer extends Component {
    constructor(props) {
        super(props);
        this.state = {};
        markerList = props.eventList;
```
//I want to put this fetched data to  Markers
```
return (
            <Map google={google} zoom={14} onClick={this.onMapClick} style={mapStyles} initialCenter={initialCenter}>
                {
                    markerList.map(marker => {
                        return (
                            <Marker
                                key={marker.id}
                                onClick={this.onMarkerClick}
                                title={marker.title}
                                name={marker.name}
                                position={{
                                    lat: marker.lat,
                                    lng: marker.lng
                                }}
                            />
...
```

Actually, I want only to have Markers from web api in my google maps. When I send hard-coded arrar{} with data it works but when I send with this api. First renders child, then takes from api. So I don't have any Markers on my map.

I read about:

a)componentWillMount

b)event on google maps like onChange or onBoundsChanged but I have no idea how to use it in my project.

Normally in WPF I had binding, here google maps works strange. JS should refresh automaticly when data comes. How to have Markers from api?

Answer 1

You are directly mutating the state like,

this.state.eventList = requestResponse.data; //direct mutation

You never mutate state like this, because it is not the right way to change state and it will not re-render your component.

You must use setState to change your state, which will cause a re-render and your component will get data.

this.setState({eventList : requestResponse.data})

Also make sure you are adding your child component when your data is ready,

{this.state.eventList.length > 0 && <GoogleApiWrapper eventList={this.state.eventList} ></GoogleApiWrapper>}

Answer 2

main.js

import React from 'react';
import GoogleMapsWrapper from './GoogleMapsWrapper.js';
import { Marker } from 'react-google-maps';
import MarkerClusterer from "react-google-/lib/components/addons/MarkerClusterer";

class DemoApp extends React.Component {
    componentWillMount() {
        this.setState({ markers: [] })
    }

    componentDidMount() {
       const url = [
           // Length issue
           `https://gist.githubusercontent.com`,
           `/farrrr/dfda7dd7fccfec5474d3`,
           `/raw/758852bbc1979f6c4522ab4e92d1c92cba8fb0dc/data.json`
           ].join("")

       fetch(url)
       .then(res => res.json())
       .then(data => {
           this.setState({ markers: data.photos });
       });
    }

    render () {
        return (
            <GoogleMapsWrapper
                googleMapURL="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places"
                loadingElement={<div style={{ height: `100%` }} />}
                containerElement={<div style={{ height: `400px` }} />}
                mapElement={<div style={{ height: `100%` }}
                defaultZoom={3}
                defaultCenter={{ lat: 25.0391667, lng: 121.525 }}>
                <MarkerClusterer
                    averageCenter
                    enableRetinaIcons
                    gridSize={60}>
                    {this.state.markers.map(marker => (
                        <Marker
                            key={marker.photo_id}
                            position={{ lat: marker.latitude, lng: marker.longitude }}
                        />
                    ))}
                </MarkerClusterer>
            </GoogleMapsWrapper>
         );
    }

}

GoogleMapsWrapper.js

import React from 'react';
import { GoogleMap,withGoogleMap,withScriptjs } from 'react-google-maps';

export default const GoogleMapsWrapper = withScriptjs(withGoogleMap(props => {
  return <GoogleMap {...props} ref={props.onMapMounted}>{props.children}</GoogleMap>
}));

Follow https://github.com/tomchentw/react-google-maps/issues/636