Passing results from multiple API results through states
Closed this issue · 1 comments
Okay, so I am trying to create an app where a user uploads a photo > adds details (including searching for and tagging the location) > sees photo on map (or maybe 3d Earth if I have time to rebuild that).
I have the following pieces working:
- Through Upload, a user can upload a file to Filestack, and I can return a url to that photo file (evident in console.log)
- A user can search for a place through Google Places, and when they click on it, I can return the location data (evident in console.log)
- A user can enter details into a form, and the form sends to my backend API
- A user can see the items fetched from the API
- I can plot latitude and longitude coordinates on a 3d sphere of the earth
What I need help on - bringing it all together:
Ultimately, I would like the post request to my API to include the FilestackURL and the Lat/Long returned from the Google Places API, in addition to user-entered data.
- How can I pass the url that is returned from the Filestack API call to the detail page if they are siblings more than parent > child relationship?
- Additionally, how can I take the location data returned from the Google Places API and store the lat/long as values in my details form?
For both of these cases you want to "lift state up", that is you want there to be a container component that is the parent to all components that need access to shared data. This can be a lot of passing data and functionality down from a container component through presentational components but it keeps related state in one place and lets you trace everything to it.
This may also be a reasonable time to consider implementing redux which will let you keep all state together and provide it wherever it is needed using connect