JSFiddle - React, Tailwind, and code Playground

by Cale Bergh

JavaScript

let place = {
  'address_components': [{
    "types": [
      "subpremise"
    ],
    "short_name": "X",
    "long_name": "X"
  }, {
    "types": [
      "street_number"
    ],
    "short_name": "1630",
    "long_name": "1630"
  }, {
    "types": [
      "route"
    ],
    "short_name": "Scenic Hwy N",
    "long_name": "Scenic Highway North"
  }, {
    "types": [
      "locality",
      "political"
    ],
    "short_name": "Snellville",
    "long_name": "Snellville"
  }, {
    "types": [
      "administrative_area_level_2",
      "political"
    ],
    "short_name": "Gwinnett County",
    "long_name": "Gwinnett County"
  }, {
    "types": [
      "administrative_area_level_1",
      "political"
    ],
    "short_name": "GA",
    "long_name": "Georgia"
  }, {
    "types": [
      "country",
      "political"
    ],
    "short_name": "US",
    "long_name": "United States"
  }, {
    "types": [
      "postal_code"
    ],
    "short_name": "30078",
    "long_name": "30078"
  }],
  "formatted_address": "123 Park, Altus, AR 72821, USA",
  "geometry": {
    "bounds": {
      "northeast": {
        "lat": 35.446594,
        "lng": -93.76056419999999
      },
      "southwest": {
        "lat": 35.4465787,
        "lng": -93.76056439999999
      }
    },
    "location": {
      "lat": 35.446594,
      "lng": -93.76056439999999
    },
    "location_type": "RANGE_INTERPOLATED",
    "viewport": {
      "northeast": {
        "lat": 35.4479353302915,
        "lng": -93.75921531970849
      },
      "southwest": {
        "lat": 35.4452373697085,
        "lng": -93.7619132802915
      }
    }
  }
};

var address = place.address_components;
var city, state, zip;
address.forEach(function(component) {
  var types = component.types;
  if (types.indexOf('locality') > -1) {
    city = component.long_name;
  }

  if (types.indexOf('administrative_area_level_1') > -1) {
    state = component.short_name;
  }

  if (types.indexOf('postal_code') > -1) {
    zip = component.long_name;
 ...