https://codesandbox.io/s/wild-sun-f9mx9?fontsize=14

LocationList.jsx

import React, { Component } from "react";
// import our child component Location
import Location from "./Location";
// import our mock data that we will be using as an example
import { MockData } from "../mock-data/MockData";
// our ulitiy function to help simulate some network latency
import { sleep } from "../helpers/sleep";

class LocationList extends Component {
  // Always set initial state, either empty [] for array, {} for objects, and so on.
  // This allows for easy checks in the render() method and for us to know what we are expecting to get as values.
  state = {
    locations: []
  };

  // a react lifecycel method, refer: https://reactjs.org/docs/react-component.html#componentdidmount
  componentDidMount() {
    const setMockData = () => {
      this.setState(
        {
          locations: MockData
        },
        // setState also accepts a callback function
        () => {
          console.log("Mock data set!");
        }
      );
    };
    // We can use point-free programming to abstract out the nesting
    // refer to the ./helpers folder to see the implementation. In short we are just simulating some network latency.
    sleep(2000).then(setMockData);

    // same as:
    // sleep(2000).then(() => {
    //   this.setState(
    //     {
    //       location: MockData
    //     },
    //     // setState also accepts a callback function
    //     () => {
    //       console.log("Mock data set!");
    //     }
    //   );
    // });
  }

  render() {
    // Destructuring our state object, very common pattern
    // Destructuring simply implies breaking down a complex structure into simpler parts.
    // see more: https://codeburst.io/es6-destructuring-the-complete-guide-7f842d08b98f
    const { locations } = this.state;

    // an if check for undefined and length
    if (!locations || !locations.length)
      return <div className="loader">Loading location list ...</div>;
    // same as checking locations.length === 0
    // if (!locations || locations.length === 0)
    //   return <div className="loader">Loading LocationList Component...</div>;

    // You can store maps iterating function in a variable to be passed in, this allows you to see it a bit clearer. We see our Location component being iterated over providing it with our location prop to be passed in.
    // I am using the index prop to just track things as you will see in the Location component
    const overOurLocationsComponent = (location, index) => (
      <li key={location.lat}>
        <Location index={index} location={location} />
      </li>
    );

    return (
      <ul className="location-list">
        {locations.map(overOurLocationsComponent)}
      </ul>
    );

    // This is the same implementation as above ^, just a more common and familiar way:
    // return (
    //   <ul className="location-list">
    //     {locations.map(location => (
    //       <li key={location.lat}>
    //         <Location location={location} />
    //       </li>
    //     ))}
    //   </ul>
    // );
  }
}

export default LocationList;