autocomplete.js

// autocomplete.js

    var componentForm = {
      locality: 'long_name',
      administrative_area_level_1: 'long_name',
      country: 'long_name'
    };
    
    for (var i = 0; i < place.address_components.length; i++) {
      var addressType = place.address_components[i].types[0];
      if (componentForm[addressType]) {
        locationObject[addressType] = place.address_components[i][componentForm[addressType]];
      }
    }

    document.getElementById('locality').value = locationObject.locality;
    document.getElementById('administrative_area_level_1').value = locationObject.administrative_area_level_1;
    document.getElementById('country').value = locationObject.country;



//===========================

// component

componentDidMount(){
  const script = document.createElement("script");
  script.src = "./assets/js/autocomplete.js";
  document.body.appendChild(script);
}

...
  handleLocationInput(e){
    const value = e.target.value;
    const name = e.target.name;
    console.log(`value is: ${value} and name is ${name}`);
  }

...

<div>
  <input type="text" id="locality" name="locality" 
    onChange={this.handleLocationInput} />
  <input type="text" id="administrative_area_level_1" name="administrative_area_level_1" 
    onChange={this.handleLocationInput} />
  <input type="text" id="country" name="country" 
    onChange={this.handleLocationInput} />
</div>