Updating state before rendering (React)

Question

I've been racking my brain for hours trying to figure an issue out. Basically, I want the markersList property in the state to be updated before the component is rendered. the markerList is suppose to be populated with Google Maps markers being pushed into the array in the initMap() method. But when I console log the array in the render method, the array is empty. I just need help on how to update the array with all markers before the render method is done. I hope what I'm asking makes sense. Thanks guys!

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      map: "",
      marker: "",
      markersList: [],
      locations: [
        {
          title: "Powell's Books",
          address: "1005 W Burnside St, Portland, OR 97209",
          coordinates: {
            lat: 45.523096,
            lng: -122.681354
          }
        },
        {
          title: "Ground Kontrol",
          address: "511 NW Couch St, Portland, OR 97209",
          coordinates: {
            lat: 45.523943,
            lng: -122.675872
          }
        },
        {
          title: "Portland Art Museum",
          address: "1219 SW Park Ave, Portland, OR 97205",
          coordinates: {
            lat: 45.51615,
            lng: -122.683357
          }
        },
        {
          title: "Roseland Theater",
          address: "8 NW 6th Ave, Portland, OR 97209",
          coordinates: {
            lat: 45.52328,
            lng: -122.676297
          }
        },
        {
          title: "Voodoo Doughnuts",
          address: "22 SW 3rd Ave, Portland, OR 97204",
          coordinates: {
            lat: 45.522713,
            lng: -122.672944
          }
        },
        {
          title: "Arlene Schnitzer Concert Hall",
          address: "1037 SW Broadway, Portland, OR 97205",
          coordinates: {
            lat: 45.517197,
            lng: -122.681419
          }
        },
        {
          title: "Pioneer Place",
          address: "700 SW 5th Ave, Portland, OR 97204",
          coordinates: {
            lat: 45.518335,
            lng: -122.677261
          }
        }
      ]
    }
  }
  componentDidMount() {
    this.initMap();
  }

  initMap = () => {
    const map = document.querySelector(".map");

    let newMap = new window.google.maps.Map(map, {
      center: {
        lat: 45.519692,
        lng: -122.680496,
        mapTypeControl: false
      },
      zoom: 16
    });

    let infoWindow = new window.google.maps.InfoWindow();
    let locations = this.state.locations;
    let bounds = new window.google.maps.LatLngBounds();


    for (let i = 0; i < locations.length; i++) {

      let wikiUrl = "https://en.wikipedia.org/w/api.php?action=opensearch&origin=*&search=" + this.state.locations[i].title + "&format=json";

      let newMarker = new window.google.maps.Marker({
        map: newMap,
        position: locations[i].coordinates,
        title: locations[i].title,
        animation: window.google.maps.Animation.DROP
      });
      this.state.markersList.push(newMarker); 
      bounds.extend(newMarker.position);
      newMarker.addListener("click", function () {
        infoWindow.open(map, this);
        newMap.panTo(newMarker.position);
        axios.get(wikiUrl)
          .then(response => {
            const wikiInfo = response.data;

            infoWindow.setContent(`<p><strong>${wikiInfo[0]}</strong><br>${locations[i].address}</p><p>${wikiInfo[2][0]}</p><p>Click <a href='${wikiInfo[3][0]}' target='_blank'><strong>HERE</strong></a> for more information on ${wikiInfo[0]}.</p>`)
          })
      })

    }
    newMap.fitBounds(bounds);
  }

  render() {
    return (
      <div>
        <div className="menu">
          <SearchInput />

          <ul className="location-list" >
          {console.log(this.state.markersList)}
          {
          }
          </ul>
        </div>
        <div className="map">

        </div>
      </div>

    );
  }
}

Answer 1

Have you tried calling componentWillMount instead of componentDidMount?