Estoy trabajando en una aplicación en la que muestro un mapa y varias ubicaciones diferentes con marcadores. Se puede hacer clic en estos marcadores para abrir un cuadro de diálogo simple, que muestra información sobre esa ubicación específica. Aquí hay un ejemplo de código:

Mapeo a través de una matriz de ubicaciones y llamando a la función en cada marcador.

 {markers && ( <> {markers.map((marker, idx) => ( <MarkerDialog key={idx} marker={marker} /> ))} </> )}

Agregar diálogo al marcador.

 const MarkerDialog = ({ marker }) => { const [dialog, setDialog] = useState(false); const handleClickOpen = () => { setDialog(true); }; const handleClose = () => { setDialog(false); }; const handleMarkerClick = (e, marker) => { if (dialog) { handleClose(); } else { handleClickOpen(); } }; return ( <div> <Marker position={marker.location} icon={status(marker)} eventHandlers={{ click: handleMarkerClick, }} /> {dialog && ( <Dialog marker={marker} dialog={dialog} handleClose={handleClose} /> )} </div> ); }; export default MarkerDialog;

Esto crea un problema si hace clic en varios marcadores. En ese caso, los diálogos se apilan uno encima del otro, porque la aplicación nunca cierra el diálogo anterior.

Si hago clic en el marcador y se abre el cuadro de diálogo, y luego voy y hago clic en otro marcador, me gustaría que se cierre el cuadro de diálogo anterior. ¿Cómo puedo conseguir esto?