Map not showing in react leaf­let

Question

Why the map is not displayed in react leaflet?

import { MapContainer, Marker, TileLayer, Popup } from "react-leaflet";
import "leaflet/dist/leaflet.css";


    <div style={{ width: "100%", height: "100vh" }}>
      <MapContainer center={[51.505, -0.09]} zoom={13} scrollWheelZoom={false}>
        <TileLayer
          attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        />
        <Marker position={[51.505, -0.09]}>
          <Popup>
            A pretty CSS3 popup. <br /> Easily customizable.
          </Popup>
        </Marker>
      </MapContainer>
    </div>

export default App;

Answer 1

You missed adding a style sheet to MapContainer, and its height is 0 now. You should add the style style={{ width: "100%", height: "100vh" }} to the MapContainer, have a look at the code below:

import { MapContainer, Marker, TileLayer, Popup } from "react-leaflet";
import "leaflet/dist/leaflet.css";

export default function App() {
  return (
    <div>
      <MapContainer
        style={{ width: "100%", height: "100vh" }}
        zoom={13}
        center={[51.505, -0.09]}
        scrollWheelZoom={false}
        fadeAnimation={true}
        markerZoomAnimation={true}
      >
        <TileLayer
          attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        />
        <Marker position={[51.505, -0.09]}>
          <Popup>
            A pretty CSS3 popup. <br /> Easily customizable.
          </Popup>
        </Marker>
      </MapContainer>
    </div>
  );
}

live demo here: https://codesandbox.io/s/throbbing-cherry-s5mb4p?file=/src/App.js:0-735