How can I exclude the street name out of the string this component give me?
I am using '@react-google-maps/api', basically the component is a dropdown and an search input for searching hotel names, just like the real google maps. the problem is that I do not know how to exclude the street name out of the string it give me, which is what I wish. any ideas will be appreciated, thanks :]
example of a result string: Hotel Washington, 15th Street Northwest, Washington, DC, USA (I am not sure that all hotel names will be without a comma in their naming)
2 Replies
import React, { useState, useRef } from 'react';
import {
useLoadScript,
Autocomplete,
} from '@react-google-maps/api';
import { ConstructionOutlined } from '@mui/icons-material';
const libraries = ['places'];
const GoogleMapsDropdown = ({
setHotelForTransfer,
placeInList,
hotelForTransfer,
setIsEnglishOnlyToggle,
handleFieldChange,
typeOfTransfer,
initialValue,
isValid,
equalDepartureHotelValue,
setTimeToRenderBasedOnArrival,
hotelForDepartureRefs,
setHotelForDepartureRefs,
testDispatch
}) => {
const [location, setLocation] = useState(initialValue);
const autocompleteRef = useRef(null);
const handlePlaceSelected = () => {
const newValue = autocompleteRef.current.value;
setLocation(newValue); // Update state with the selected value
alterTabHotelField(newValue);
isEnglishOnlyInput(newValue);
};
function testDeptRefs(newValue) {
const newArrayOfRefs = [...hotelForDepartureRefs];
newArrayOfRefs[placeInList] = newValue;
setHotelForDepartureRefs(newArrayOfRefs);
}
function alterTabHotelField(newValue) {
const e = { target: { value: newValue || "", name: "hotel" } };
handleFieldChange(e, placeInList, typeOfTransfer);
if (typeOfTransfer === "arr") {
handleFieldChange(e, placeInList, "dept");
}
}
function isEnglishOnlyInput(content) {
// setIsEnglishOnlyToggle
const pattern = /^[!@#\$%\^\&*\)\(+=._-\s0-9a-zA-Z`~\[\]\{\}:;"'<>,./?\\|]*$/;
if (pattern.test(content)) {
testDispatch(placeInList, true)
} else {
testDispatch(placeInList, false)
}
}
return (
<><Autocomplete onPlaceChanged={handlePlaceSelected}>
<input
className={(isValid === false && initialValue === '') ? 'hotel-search-input-invalid' : 'hotel-search-input'}
value={typeOfTransfer === "arr" ? location : hotelForDepartureRefs[placeInList]}
ref={autocompleteRef}
onChange={(event) => {
setLocation(event.target.value);
alterTabHotelField(event.target.value);
isEnglishOnlyInput(event.target.value);
}} // Update state and call alterTabHotelField
inputProps={{
placeholder: 'test',
}}
/>
</Autocomplete>
{/* <button type="button" onClick={() => testDispatch()}>Test dispatch</button> */}
</>
);
};
export default function App({
setHotelForTransfer,
placeInList,
hotelForTransfer,
handleFieldChange,
typeOfTransfer,
initialValue,
isValid,
equalDepartureHotelValue,
setTimeToRenderBasedOnArrival,
hotelForDepartureRefs,
setHotelForDepartureRefs,
setIsEnglishOnlyToggle,
testDispatch
}) {
const { isLoaded } = useLoadScript({
googleMapsApiKey: '',
libraries,
});
return (
<div ref={isLoaded ? mapContainerStyle : null}>
{isLoaded && (
<GoogleMapsDropdown
setHotelForTransfer={setHotelForTransfer}
placeInList={placeInList}
hotelForTransfer={hotelForTransfer}
handleFieldChange={handleFieldChange}
typeOfTransfer={typeOfTransfer}
initialValue={initialValue}
isValid={isValid}
equalDepartureHotelValue={equalDepartureHotelValue}
setTimeToRenderBasedOnArrival={setTimeToRenderBasedOnArrival}
hotelForDepartureRefs={hotelForDepartureRefs}
setHotelForDepartureRefs={setHotelForDepartureRefs}
setIsEnglishOnlyToggle={setIsEnglishOnlyToggle}
testDispatch={testDispatch}
/>
)}
</div>
);
}
// Optional styling for the map container (can be customized)
const mapContainerStyle = {
width: '400px',
height: '400px',
};
import React, { useState, useRef } from 'react';
import {
useLoadScript,
Autocomplete,
} from '@react-google-maps/api';
import { ConstructionOutlined } from '@mui/icons-material';
const libraries = ['places'];
const GoogleMapsDropdown = ({
setHotelForTransfer,
placeInList,
hotelForTransfer,
setIsEnglishOnlyToggle,
handleFieldChange,
typeOfTransfer,
initialValue,
isValid,
equalDepartureHotelValue,
setTimeToRenderBasedOnArrival,
hotelForDepartureRefs,
setHotelForDepartureRefs,
testDispatch
}) => {
const [location, setLocation] = useState(initialValue);
const autocompleteRef = useRef(null);
const handlePlaceSelected = () => {
const newValue = autocompleteRef.current.value;
setLocation(newValue); // Update state with the selected value
alterTabHotelField(newValue);
isEnglishOnlyInput(newValue);
};
function testDeptRefs(newValue) {
const newArrayOfRefs = [...hotelForDepartureRefs];
newArrayOfRefs[placeInList] = newValue;
setHotelForDepartureRefs(newArrayOfRefs);
}
function alterTabHotelField(newValue) {
const e = { target: { value: newValue || "", name: "hotel" } };
handleFieldChange(e, placeInList, typeOfTransfer);
if (typeOfTransfer === "arr") {
handleFieldChange(e, placeInList, "dept");
}
}
function isEnglishOnlyInput(content) {
// setIsEnglishOnlyToggle
const pattern = /^[!@#\$%\^\&*\)\(+=._-\s0-9a-zA-Z`~\[\]\{\}:;"'<>,./?\\|]*$/;
if (pattern.test(content)) {
testDispatch(placeInList, true)
} else {
testDispatch(placeInList, false)
}
}
return (
<><Autocomplete onPlaceChanged={handlePlaceSelected}>
<input
className={(isValid === false && initialValue === '') ? 'hotel-search-input-invalid' : 'hotel-search-input'}
value={typeOfTransfer === "arr" ? location : hotelForDepartureRefs[placeInList]}
ref={autocompleteRef}
onChange={(event) => {
setLocation(event.target.value);
alterTabHotelField(event.target.value);
isEnglishOnlyInput(event.target.value);
}} // Update state and call alterTabHotelField
inputProps={{
placeholder: 'test',
}}
/>
</Autocomplete>
{/* <button type="button" onClick={() => testDispatch()}>Test dispatch</button> */}
</>
);
};
export default function App({
setHotelForTransfer,
placeInList,
hotelForTransfer,
handleFieldChange,
typeOfTransfer,
initialValue,
isValid,
equalDepartureHotelValue,
setTimeToRenderBasedOnArrival,
hotelForDepartureRefs,
setHotelForDepartureRefs,
setIsEnglishOnlyToggle,
testDispatch
}) {
const { isLoaded } = useLoadScript({
googleMapsApiKey: '',
libraries,
});
return (
<div ref={isLoaded ? mapContainerStyle : null}>
{isLoaded && (
<GoogleMapsDropdown
setHotelForTransfer={setHotelForTransfer}
placeInList={placeInList}
hotelForTransfer={hotelForTransfer}
handleFieldChange={handleFieldChange}
typeOfTransfer={typeOfTransfer}
initialValue={initialValue}
isValid={isValid}
equalDepartureHotelValue={equalDepartureHotelValue}
setTimeToRenderBasedOnArrival={setTimeToRenderBasedOnArrival}
hotelForDepartureRefs={hotelForDepartureRefs}
setHotelForDepartureRefs={setHotelForDepartureRefs}
setIsEnglishOnlyToggle={setIsEnglishOnlyToggle}
testDispatch={testDispatch}
/>
)}
</div>
);
}
// Optional styling for the map container (can be customized)
const mapContainerStyle = {
width: '400px',
height: '400px',
};
Unknown User•3mo ago
Message Not Public
Sign In & Join Server To View