Implementing a Cities Autocomplete with the Google Places API in React

// src/components/LocationSearchInput.js

import React from 'react'
import PlacesAutocomplete, { geocodeByAddress } from 'react-places-autocomplete'

class LocationSearchInput extends React.Component {
  constructor(props) {
    super(props);
    this.state = { address: '' }
  }

  handleChange = (address) => {
    this.setState({ address })
  }

  // When the user selects an autocomplete suggestion...
  handleSelect = (address) => {
    // Pull in the setFormLocation function from the parent ReportForm
    const setFormLocation = this.props.setFormLocation

    geocodeByAddress(address)
      .then(function(results){
        // Set the location in the parent ReportFrom
        setFormLocation(results[0].formatted_address)
      })
      .catch(error => console.error('Error', error))
  }

  render() {
    const renderInput = ({ getInputProps, getSuggestionItemProps, suggestions }) => (
      <div className="autocomplete-root">
        <input className="form-control" {...getInputProps()} />
        <div className="autocomplete-dropdown-container">
          {suggestions.map(suggestion => (
            <!-- Add a style of "suggestion" to the suggested locations -->
            <div {...getSuggestionItemProps(suggestion)} className="suggestion">
              <span>{suggestion.description}</span>
            </div>
          ))}
        </div>
      </div>
    );

    // Limit the suggestions to show only cities in the US
    const searchOptions = {
      types: ['(cities)'],
      componentRestrictions: {country: "us"}
     }

    return (
      <PlacesAutocomplete
        value={this.state.address}
        onChange={this.handleChange}
        onSelect={this.handleSelect}
        // Pass the search options prop
        searchOptions={searchOptions}
      >
        {renderInput}
      </PlacesAutocomplete>
    );
  }
}

export default LocationSearchInput

// src/components/ReportForm.js

import React from "react"
// import the LocationSearchInput
import LocationSearchInput from './LocationSearchInput'

class ReportForm extends React.Component {
  // Set up a state to help pass data back to the parent App component
  constructor(){
    super()
    this.state = {
      cityLoc: '',
      stateLoc: ''
    }
  }

  // Get the info from the LocationSearchInput component and save
  // it to state here in ReportForm.
  setFormLocation = (googleLocation) => {
    // The Google result comes back as a comma-separated string:
    // "Austin, TX, USA". Parse it into usable data.
    let parsedLoc = googleLocation.split(', ')
    this.setState({
      cityLoc: parsedLoc[0],
      stateLoc: parsedLoc[1]
    })
  }

  // Process the form submission with the info that was just
  // saved to ReportForm.state
  createReportLocation = (e) => {
    e.preventDefault()
    const inputLocation = {
      cityLoc: this.state.cityLoc,
      stateLoc: this.state.stateLoc
    }
    // Call the parent App component's setReportLocation function, which
    // sets App.state. so that all other components will have access to it.
    this.props.setReportLocation(inputLocation)
  }

  // Render the form
  render(){
    return (
      // Set the form submission handler to createReportLocation
      <form onSubmit={this.createReportLocation}  className="card card-body mb-3">
        <div className="row">
          <div className="col-sm-12">
            <p>Enter a US City</p>
          </div>
        </div>

        <div className="row">
          <div className="col-sm-10">
            // Pass the setFormLocation function as a prop to be called
            // in the LocationSearchInput component.
            <LocationSearchInput setFormLocation={this.setFormLocation}/>
          </div>

          <div className="col-sm-2">
            <button type="submit" className="btn btn-xs btn-primary">Submit</button>
          </div>
        </div>
      </form>
    )
  }
}

export default ReportForm

// src/components/App.js

class App extends Component {
  ...
  // Sets the state of App.js and is called from within the ReportForm
  setReportLocation = (location) => {
    this.setState({
      cityLoc: location.cityLoc,
      stateLoc: location.stateLoc
    })
    // Call the function to get the Rails API Data,
    // passing it this location information
    this.getReportData(location)
  }
    ...
    // Pass on the report data to the Report
    {reportData ? <Report data={reportData} cityLoc={cityLoc} stateLoc={stateLoc}/> : ""}
    ...
}

export default App;