TileLayer displays in different order (Using React-Leaflet library)

Question

I'm trying to do a simple Web App using the library react-leaflet.

I have the following code:

import React from 'react';
import { Map, Marker, Popup, TileLayer } from 'react-leaflet';

class LeafletMap extends React.Component {
  constructor() {
    super();
    this.state = {
      lat: 51.505,
      lng: -0.09,
      zoom: 13,
    };
  }

  render() {
    const position = [this.state.lat, this.state.lng];
    return (
      <Map center={position} zoom={this.state.zoom}>
        <TileLayer
          url='http://{s}.tile.osm.org/{z}/{x}/{y}.png'
        />
        <Marker position={position}>
          <Popup>
            <span>A pretty CSS3 popup. <br/> Easily customizable.</span>
          </Popup>
        </Marker>
      </Map>
    );
  }
}
export default LeafletMap;

However, The TileLayer is displaying in random order all the time. I've read a lot of code where It must work with ComponentDidMount() by Reactjs, but The renders that I've seen are totally different compared to the library.

Do you have any idea what can I do?

Answer 1

The only reason It was not working is because we need to add the following code in index.html:

<link rel="stylesheet" href="https://npmcdn.com/[email protected]/dist/leaflet.css" />
<style type="text/css">
    .leaflet-container {
        height: 400px;
    }
</style>

That's all.