Manage Stale Map Data in React Leaflet

Colby Fayock: [0:00] Previously, we commented out our marker component. What if we uncommented that and see what it did on the map?

[0:05] Since they're the same location, we can't really notice a difference they do the same thing. If we look in the Source code, we can actually see that there are two instances of a marker. While visually, that might not make a difference, it can become problematic with the code.

[0:15] To test this out, I added a quick-click event to our marker. The goal here is once somebody clicks on that marker, it's going to console.log('TEST'). If I go to the page and try to click it, we can see that we don't actually get a console.log.

[0:25] The issue here is that our marker component is sitting on top of the one we added programmatically. We can see this by adding a draggable property to our marker and setting it to true. Now, in our browser, we can drag off that marker and click the one behind it. We can see that a console.logs out ('TEST').

[0:39] To fix this, the obvious thing is to remove the marker component. Moving forward, we want to also make sure that we're managing markers from one spot. That way, we have a single source of truth for managing our map state. Once that component's gone, I can now click it, and I can see my test log.