react-geosuggest | A React autosuggest for the Google Maps Places API | Frontend Framework library
kandi X-RAY | react-geosuggest Summary
kandi X-RAY | react-geosuggest Summary
A React autosuggest for the Google Maps Places API. You can also define your own suggests as defaults. Works with Preact, too.
Support
Quality
Security
License
Reuse
Top functions reviewed by kandi - BETA
Currently covering the most popular Java, JavaScript and Python libraries. See a Sample of react-geosuggest
react-geosuggest Key Features
react-geosuggest Examples and Code Snippets
Community Discussions
Trending Discussions on react-geosuggest
QUESTION
I have a simple next.js app with two pages, index.js and results.js. The index page has two Location AutoComplete fields which return the address and LatLng of a location after a user selects it from the dropdown of reccomended locations. Once returned, this data is stored in a variable called markers
on the index page. When the user clicks the Get Results button on the index page, I'm attempting to pass the address and LatLng data to the results page, so that the selected locations can be shown as a markers on the map.
I've been attempting to do this on and off for about a week now and I can't figure out how to achieve what I want. I feel that there should be a super simple way to do this but I just can't figure it out. I've tried things like:
- Passing the data thorough request parameters on a button click, but the link is generated based on the variables value when the page renders rather than being updated when the variable is updated
- Having the map on the same page as the location autocomplete and attempting to use state to automatically reload the map, which didn't seem to work at all for me
- I've also looked into Redux but this seems to be way too complicated to simply pass an object/it's data from one page to another
My ideal solution is a simple way to pass the data from indext to results. It's probably also worth pointing out that I'm new to React/Next.js so I might be going about all of this the wrong way, and once this is working I'll also be adding in an API call to get directions between the two LatLng points which will also be displayed on the map on the results page.
Codeindex.js (simplified)
...ANSWER
Answered 2021-Dec-30 at 12:45I think there are two questions here:
- How do I pass data between two NextJS pages?
- Why isn't my link updating when the
suggest
values are updated?
There are a few different ways you can pass data between pages, but the querystring params is probably the method I would use. Although I would not use the description in the querystring if possible. You can do this by using the NextJS component
However, it appears you have tried something like this and the link is not updating. The reason for this is how the markers
data is set. You have set this as a const in the component, which tells React not to monitor changes to this object. When onFromSuggestSelect
fires, it updates the object properties and then... nothing. React thinks that there can't be any changes to the as nothing has changed in the Parent.
This is why we have React State. If you change your markers
const to instead use the useState
hook, you should find that the implemented will update when the value is changed.
A word of warning; read the docs thoroughly if you have not used the useState
hook before so that you understand how to implement this correctly.
I hope this solves your problem.
Community Discussions, Code Snippets contain sources that include Stack Exchange Network
Vulnerabilities
No vulnerabilities reported
Install react-geosuggest
Support
Reuse Trending Solutions
Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from over 650 million Knowledge Items
Find more librariesStay Updated
Subscribe to our newsletter for trending solutions and developer bootcamps
Share this Page