So whenever our location changes here in the location picker, I want to inform the new place screen.
Well that of course means that here
when I picked a place on the map or also here if I got the user location, in both cases I want to
trigger a method or a function which I expect to get from my new place screen.
So the same thing as we're doing it on the image picker in the end. There once I took an image, I call props
on image taken to call a function that the parent component,
so the new place screen, can pass to the image picker and I want to do the same here,
I want to use the same pattern here in the location picker.
So here after picking a location with the please locate me button, I want to trigger props on location
picked and forward this location in the end, right and I want to do the exact same thing if I got a new
map location.
So besides setting the internal location to update the preview, I'll forward
in this case here, the map pick location. So on location picked is now a prop we can set on the location
picker, so I'll do that here in the new place screen and this should now point to a function which will
receive the picked location. So here we can add the location picked handler,
this is a function and this function will of course receive the location in the end and for the moment,
I'll just console log it there and then take the function name here and pass that to on location picked
so that a reference to this function is passed to on location picked into the location picker.
Now one important thing, on location picked is getting used in use effect here,
therefore we should specify it as a dependency,
so to only specify this and not all our props, I'll use this destructuring syntax for I get on location
picked out of my props like this, so that I can use it without props.
Now I can use it here on location picked and now to make sure we get no infinite loop, back in the new
place screen where we do with send in this function,
I need to make sure that the location picked handler which is what I do provide on location picked is
a function that doesn't change all the time.
So here, I'll import use callback and wrap use callback around my location picked handler, to avoid that
this gets recreated with every re-render cycle and I therefore get into an infinite loop
and here use callback needs no dependencies because in there, right now I'm doing nothing with external
data.
So now we should see that log hopefully when we either select a user with the get user location button
and that's looking good,
here's my output and the same if I pick it on the map.
So if I pick a location here and I click save, I also get this output. So that seems to work, this here
was my first output,
this was the second output for picking it on the map and with that, we have the information available in the
new place screen,
now we just need to store it in some state there as we're doing it with the title and the image,
so the selected location and set selected location,
we get that with the help of use state and now we can call set selected location in here and set our
location, like this. You don't need to specify this as a dependency,
you could but React will guarantee that it doesn't change anyway so you don't need to specify this
and now we got our selected location here. We can now use this in the save place handler, there besides
forwarding title value and selected image,
we can now also forward the selected location to add place. And therefore the next thing we'll do is
work on our Redux logic to take that location into account and that's one thing that's missing right
now,
also make sure we translate this coordinate pair we get into a human readable address as well.