Bug display with react leaflet

Question

I start with react and I want to use a module that is called "react-leaflet" to make a map map. But the problem is that I have a display bug with my map in the end on my page. Can you help me please ?

Component Map:

import './Map.css';
import React, { Component } from 'react';
import { Map, Marker, Popup, TileLayer } from 'react-leaflet';

export default class MapLeaflet extends Component {

    constructor(props) {
        super(props);
        this.state = {
            lat: 51.505,
            lng: -0.09,
            zoom: 13
        }
    }

    render() {
        const position = [this.state.lat, this.state.lng];
        console.log("dqdsqdq");
        return(
            <div id="map">
                <Map center={position} zoom={13}>
                    <TileLayer
                        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
                        attribution="&copy; <a href=&quot;http://osm.org/copyright&quot;>OpenStreetMap</a> contributors"
                    />
                    <Marker position={position}>
                        <Popup>A pretty CSS3 popup.<br />Easily customizable.</Popup>
                    </Marker>
                </Map>
            </div>
        );
    }
}

Page to display Map:

import './Apies.css';
import React, { Component } from 'react';
import MapLeaflet from '../../components/Map/Map.js';

export default class Apies extends Component {

    render() {
        return (
            <section className="Apies">
                <main className="main">
                    <h2>Map</h2>
                    <MapLeaflet/>
                </main>
            </section>
        );
    }
}

Bug display: https://i.sstatic.net/nb7fH.jpg

Answer 1

It is required to import leaflet.css in your index.js and give a height to map container.

index.js:

import "leaflet/dist/leaflet.css";

MapLeaflet:

  ...
<Map style={{ height: "100vh" }} center={position} zoom={13}>

Demo