I have an Array that has a boolean variable that decides which data is shown and which is not, those values are changed from a checkbox in another component, what happens to me is that when updating the array, the map is not updated to the new data. If the message is not understood it is because I am using a translator.
import './Leaflet.css'
import React from "react";
import { MapContainer, TileLayer,} from 'react-leaflet'
import { Data } from '../../components/data/SidebarData'
import SubMapa from './SubMapa';
function Mapa() {
const referencia = useRef();
const center = [8.890498870150504, -80.1123046875]
console.log(`hola`)
return (
<>
<MapContainer center={center} zoom={8}>
<TileLayer
attribution='© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
{Data.map((items, index) => {
return <SubMapa items={items} key={index} />
})}
</MapContainer>
</>
)
}
export default Mapa;
You need to pass your Data as a prop instead of importing it, otherwise you component's state won't change and it won't re-render.
In your component:
const Mapa = ({ data }) => {
const referencia = useRef();
const center = [8.890498870150504, -80.1123046875]
console.log(`hola`)
return (
<>
<MapContainer center={center} zoom={8}>
<TileLayer
attribution='© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
{data.map((items, index) => {
return <SubMapa items={items} key={index} />
})}
</MapContainer>
</>
)
}
export default Mapa;
where you render your component:
<Mapa data={Data} />