I am currently working on a React application using TypeScript and incorporating the Google Places and Geocoder APIs through various React libraries such as "react-places-autocomplete": "^7.2.1" and "react-final-form": "^6.3.0".
The issue I'm facing revolves around updating the value in the react-final-form field after the user selects a suggestion from the auto-complete feature. Below is a snippet of the code showcasing the onSelect functions:
onSelect Functions:
const handleCitySelect = (selectedCity: string) => {
geocodeByAddress(selectedCity)
.then(results => getLatLng(results[0]))
.then(latlng => {
setCityLatLng(latlng);
}); <-- Here I need to update the field with selectedCity
};
const handleVenueSelect = (selectedVenue: string) => {
geocodeByAddress(selectedVenue)
.then(results => getLatLng(results[0]))
.then(latlng => {
setVenueLatLng(latlng);
}); <-- Here I need to update the field with selectedVenue
};
React final form:
<FinalForm <-- react-final-form component
validate={validate}
initialValues={activity}
onSubmit={handleFinalFormSubmit}
render={({ handleSubmit, invalid, pristine }) => (
<Form onSubmit={handleSubmit} loading={loading}> <-- semantic-ui-react component
<Field
name="title"
placeholder="Title"
value={activity.title}
component={TextInput}
/>
<Field
name="description"
placeholder="Description"
rows={3}
value={activity.description}
component={TextAreaInput}
/>
// Other fields...
<Field <-- field I need to update after the onSelect callback
component={PlaceInput}
name="city"
placeholder="City"
options={{ types: ["(cities)"] }}
value={activity.city}
onSelect={handleCitySelect}
/>
<Field <-- field I need to update after the onSelect callback
component={PlaceInput}
name="venue"
placeholder="Venue"
options={{
location: new google.maps.LatLng(cityLatLng),
radius: 1000,
types: ["establishment"]
}}
value={activity.venue}
onSelect={handleVenueSelect}
/>
<...>
The PlaceInput component acts as a custom wrapper for the PlacesAutocomplete component that provides suggestions based on user input.
If anyone has a solution or suggestions for this issue, I would greatly appreciate it. I've searched online extensively but couldn't find a straightforward resolution. Feel free to ask for more information or code snippets if needed.
Thank you,