Location component. https://codesandbox.io/s/using-javascript-map-function-in-reactjs-f9mx9

Location.jsx

import React, { Component } from "react";
import { sleep } from "../helpers/sleep";

export class Location extends Component {
  // Always set initial states, here we have 2 booleans we are expecting and checking / updating against.
  // This allows for easy checks in the render() method and for us to know what we are expecting to get as values.
  state = {
    show: false,
    loading: true
  };

  // a react lifecycel method, refer: https://reactjs.org/docs/react-component.html#componentdidmount
  componentDidMount() {
    // 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(() => {
      this.setState(
        {
          loading: false
        },
        // setState accepts a callback function and other intereting things ref: https://reactjs.org/docs/react-component.html#setstate
        // here we're just letting ourselves know that it's loaded.
        () => {
          console.log(
            `Location component loaded at index ${this.props.index}.`
          );
        }
      );
    });
  }

  handleToggle = () => {
    const { show } = this.state;
    this.setState({
      show: !show
    });
  };

  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 { location, index } = this.props;
    const { show, loading } = this.state;

    // Since we are passing in a location Object, we need to check it's length, one way is to use the native JavaScript Object.keys method: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys
    // Another note here, I am also simulating the loading of each location, which can be useful for lazy loading longer lists of data.

    if (!location || !Object.keys(location).length || loading)
      return (
        <div className="loader">{`Loading each location at index ${index} ...`}</div>
      );

    return (
      <div className="location">
        <div className="location-name">
          {location.name_string}{" "}
          <span>
            <button className="detail-btn" onClick={this.handleToggle}>
              Details
            </button>
          </span>
        </div>

        {/* a shorter way to render JSX if it's true */}
        {show && (
          <div className="detail-info">
            <div>
              {location.city}, {location.state}. {location.zip}{" "}
              {location.country}. {location.localized_country_name}
            </div>
            <div>
              lat: {location.lat}, long: {location.lon}
            </div>
          </div>
        )}
      </div>
    );
  }
}

export default Location;