Leaflet.js Map Not taking up Full Width [React.js]

Question

I have a leaflet.js Map that is not appearing full height inside the div, or full width, even with 100% full height declared in the CSS. The Code and Video is below.

https://codesandbox.io/s/determined-napier-wywxg

Answer 1

Provide width and height equal to 100% to your parent div on MapContainer and listen to whenCreated prop event on MapContainer. There use map.invalidateSize in combination with setInterval event

 <LeafletMap  center={[34.80746, -40.4796 ]} zoom={3} 
              whenCreated={map => setInterval(() =>{ map.invalidateSize()}, 100)}
              style={{width: '100%', height: '100%'}}>
              <TileLayer 
               url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
               attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
              />
  </LeafletMap>

Demo