/Javascript/React/React google places auto complete example

React google places auto complete example

import React from 'react';import PlacesAutocomplete, {  geocodeByAddress,  getLatLng,} from 'react-places-autocomplete'; class LocationSearchInput extends React.Component {  constructor(props) {    super(props);    this.state = { address: '' };  }   handleChange = address => {    this.setState({ address });  };   handleSelect = address => {    geocodeByAddress(address)      .then(results => getLatLng(results[0]))      .then(latLng => console.log('Success', latLng))      .catch(error => console.error('Error', error));  };   render() {    return (      <PlacesAutocomplete        value={this.state.address}        onChange={this.handleChange}        onSelect={this.handleSelect}      >        {({ getInputProps, suggestions, getSuggestionItemProps, loading }) => (          <div>            <input              {...getInputProps({                placeholder: 'Search Places ...',                className: 'location-search-input',              })}            />            <div className="autocomplete-dropdown-container">              {loading && <div>Loading...</div>}              {suggestions.map(suggestion => {                const className = suggestion.active                  ? 'suggestion-item--active'                  : 'suggestion-item';                // inline style for demonstration purpose                const style = suggestion.active                  ? { backgroundColor: '#fafafa', cursor: 'pointer' }                  : { backgroundColor: '#ffffff', cursor: 'pointer' };                return (                  <div                    {...getSuggestionItemProps(suggestion, {                      className,                      style,                    })}                  >                    <span>{suggestion.description}</span>                  </div>                );              })}            </div>          </div>        )}      </PlacesAutocomplete>    );  }}

Source: npmjs.com

Similar codes

1 vote310 views1 answer
Arrow not showing react slick
Javascript React
45 votes336 views4 answers
Can't resolve 'react-router-dom'
Javascript React
0 vote319 views1 answer
React-native-calendars how to mark selected day
Javascript React
20 votes318 views6 answers
Useeffect react example
Javascript React
0 vote341 views1 answer
React native height full
Javascript React
0 vote320 views1 answer
Reactjs download file axios
Javascript React
1 vote371 views1 answer
React native text capitalize
Javascript React
0 vote334 views1 answer
Box-shadow: 0px 4px 8px rgba(164, 188, 223, 0.15); to react native
Javascript React
1 vote329 views1 answer
React event target square brackets
Javascript React
0 vote326 views1 answer
How to change currency in react-paypal-button-v2
Javascript React