Leaflet map is not displayed in ReactJS

Question

I have included both the css and js Leaflet map CDN links. Also given height and width to div container inside which Map component is present, but still the map is not getting displayed. The space of the container is getting occupied, but nothing is displayed. Also there is no error displayed in console. Can anyone please help me with this one?

The following is my Contact Component Code:

import React,{useState, useRef, useEffect} from 'react';
import {BsExclamationLg, BsPatchCheckFill} from "react-icons/bs";
import Map from './Map';
import Blast from "./Blast"

const Contact = () => {

  const[letterClass, setLetterClass] = useState("text-animate");
  useEffect(()=>{
    setTimeout(()=>{
      setLetterClass("text-animate-hover")
    }, 3000)
  },[])

  const [validInput, setValidInput] =useState({
    name:"",
    email:"",
    subject:"",
    message:"",
  })

  // const emailRef = useRef(null);
  const TextAreaRef = useRef(null);
  // const MessageRef = useRef(null);
  const form = useRef(null);

  const onSubmit =(e)=>{
    console.log(e);
  }

  const handleChange = (e) => {
    const { name, value } = e.target
    setValidInput((preValue) => {
      return { ...preValue, [name]: value }
    })
  }

  return (
    <>
      <section className='contact-section'>
        <form ref={form} className='contact-form' onSubmit={onSubmit}>
          <div>
            <h2 className='contact__heading'>
              <Blast letterClass={letterClass} arrayStr={["C", "o","n","t", "a", "c", "t", " ", "m", "e"]} indexLetter={12} />
            </h2>  
            <p>Got a question or proposal, or just want to say hello? Go ahead</p>
          </div>  
          <div className='input-wrapper'>
            <div className="form-input-group">
              <input type="text" name="name" placeholder="Name" value={validInput.name} autoComplete='false' onChange={handleChange}/>
              <span className='switch__bg'></span>
            </div>
            <div className="form-input-group">
              <input type="text" name="email" placeholder="Email" value={validInput.email} autoComplete='false' onChange={handleChange}/>
              <span className='switch__bg'></span>
              <BsExclamationLg className='exclamation'/>
              <BsPatchCheckFill className='checkCircle'/>
            </div>
          </div>
          <div className="form-input-group">
              <input type="text" name="subject" placeholder="Subject" value={validInput.subject} autoComplete='false' onChange={handleChange}/>
              <span className='switch__bg'></span>
              <BsExclamationLg className='exclamation'/>
              <BsPatchCheckFill className='checkCircle'/>
            </div>
            <div className="form-input-group">
              <textarea autoComplete='false' ref={TextAreaRef} type="text" placeholder='Message' name="message" value={validInput.message} onChange={handleChange}></textarea>
              <span className='switch__bg'></span>
              <BsExclamationLg className='exclamation'/>
              <BsPatchCheckFill className='checkCircle'/>
            </div>
            <button className='contact-button submit-button' type='submit'>
              <div>
                <span className="text">Shoot</span>
              </div>
            </button>
        </form>  
        <div id="leaflet-map">
          <Map />
        </div>
      </section> 
    </>
  )
}

export default Contact

I have imported this Map component inside Contact component:

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

const Map = () => {
    return (
        <div>
            <MapContainer center={[18.494102, 73.932754]} zoom={13} scrollWheelZoom={false}>
                <TileLayer
                    url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
                />
                <Marker position={[18.494102, 73.932754]}>
                    <Popup>Tadaa! Here's where I live</Popup>
                </Marker>
                <div className="map-content">
                    <span>Aaryan Pinto,</span>
                    <br />
                    <span>Location: Pune, India</span>
                    <br />
                    <span>Email: imaryan32@gmail.com</span>
                </div>
            </MapContainer>
        </div>
    )
}

export default Map

Answer 1

you should set fixed height for leaflet parent . ( in your case )

    <div id="leaflet-map"style={{height: '20%}}>
      <Map />
    </div>

Answer 2

I have created a simple jsFiddle demo doing exactly what you want:

The Javascript code will display a popup, when you click the marker:

'use strict';

var popupContent = '<div className="map-content">' +
                      '<span>Aaryan Pinto,</span>' +
                      '<br />' +
                      '<span>Location: Pune, India</span>' +
                      '<br />' +
                      '<span>Email: imaryan32@gmail.com</span>' +
                    '</div>';

var startPosition = [18.494102, 73.932754];
var map = L.map('leaflet-map').setView(startPosition, 13);

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

var marker = L.marker(startPosition)
  .bindPopup(popupContent)
    .addTo(map);

html, body { 
  margin: 0;
  padding: 0;
}

#leaflet-map {
  position: absolute;
  width: 100%;
  height: 100%;
}

<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet@1/dist/leaflet.min.css">
<script src="https://cdn.jsdelivr.net/npm/leaflet@1/dist/leaflet-src.min.js"></script>

<div id="leaflet-map"></div>

If you want to receive more help with your ReactJS app, you should do at least 2 things:

1. Copy paste the browser console output
2. Submit a screenshot of browser dev tools for the not-displayed map, by clicking it with the right mouse button and selecting "Inspect..."

This is needed to see the CSS properties of the '#leaflet-map' element.