Interactivity is a core feature of modern web maps, and with react-leaflet, you can easily handle user events such as clicks, drags, and zooms. React-leaflet provides a set of event props—like onClick, onMove, and onZoom—that you can attach directly to map components. These handlers allow you to respond to user actions on the map. For example, you might want to display information when a user clicks a marker, update the map center as the user drags, or trigger data loading when the map is zoomed.

When you attach an event handler such as onClick to a MapContainer or a Marker, the handler receives an event object with useful information. This object might include the latitude and longitude of the click, or the new zoom level after a zoom event. You can use these details to update your React component's state, ensuring your UI always reflects the latest user interaction.

Updating React state in response to map events is straightforward. For instance, you might use the useState hook to store the current map center or zoom level. Inside an event handler like onMove, you can call your state setter function with the new values from the event object. This keeps your application's state in sync with how users interact with the map, and allows you to trigger other effects—such as fetching new data or updating overlays—whenever the map changes.