Блог

Я создал компонент панели поиска в react с помощью библиотеки автозаполнения react-places, когда я набираю текст, он отображает некоторые предложения, такие как названия округов/городов. Я хочу, чтобы он открывал эту простую домашнюю страницу назначения, когда я нажимаю на какие-либо предложения.

react-places-автозаполнение использует API javascript google maps, который я использую для предложения мест

код места назначения дома:

 
export default class DestinationHome extends Component {


    render() {
       
        return (
            <div>
                <h1>new york</h1>
            </div>
        )
    }
}
 

это штрих-код для поиска:

 import PlacesAutocomplete, {
  geocodeByAddress,
  getLatLng,
} from "react-places-autocomplete";

import { FaSearchLocation } from "react-icons/fa";
import "./LocationSearch.css";

export default function LocationSearch() {
  const [address, setAddress] = React.useState("");
  const [coordinates, setCoordinates] = React.useState({
    
    lat: null, 
    lng: null, 
  });

  const handleSelect = async (value) => {
    const results = await geocodeByAddress(value); 
    const latLng = await getLatLng(results[0]); 
    setAddress(value); 
    setCoordinates(latLng); 
    
  };


  const onError = (status, clearSuggestions) => {
    console.log("Google Maps API returned error with status: ", status);
    clearSuggestions();
  };

  return (
    <div className="locationsearch">
      <PlacesAutocomplete
        value={address} 
        onChange={setAddress} 
        onSelect={handleSelect} 
        onError={onError}
      >
        {({ getInputProps, suggestions, getSuggestionItemProps, loading }) => (
          <div className="locationsearch-container">
            <div className="searchbar">
              <input
                className="input-text"
                {...getInputProps({ placeholder: "where to go?" })}
              />
              <button className="search-button">
                <FaSearchLocation />
              </button>
            </div>
            <div>
              {loading ? <div>...loading</div> : null}

              {suggestions.map((suggestion) => {
                const style = {
                  backgroundColor: suggestion.active ? "#41b6e6" : "#fff",  
                  
                };

                return (
                  <div className='suggestions'{...getSuggestionItemProps(suggestion, { style })}>
                    {suggestion.description}
                  </div>
                );
              })}
            </div>
          </div>
        )}
      </PlacesAutocomplete>
    </div>
  );
}