React Leaflet display legend using MapContainer

Question

I'm using React leaflet 3.1.0 and I want to display a legend in the map. I built a component for the legend and pass map instance that I get from MapContainer whenCreated({setMap}).

Map Component:

import { useState } from 'react';
import { MapContainer, TileLayer } from 'react-leaflet';

import './Map.css';
import Legend from './Legend/Legend';

const INITIAL_MAP_CONFIG = {center: [41.98311,2.82493], zoom: 14}

function Map() {
    const [map, setMap] = useState(null);
   
    return (
        <MapContainer center={INITIAL_MAP_CONFIG.center} zoom={INITIAL_MAP_CONFIG.zoom} scrollWheelZoom={true} whenCreated={setMap}>
            <TileLayer
                attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
                url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
            />              
            <Legend map={map} /> 
        </MapContainer>  
    )
}

export default Map

Legend Component:

import { useEffect } from 'react';
import L from 'leaflet';

function Legend({ map }) {    
    
    useEffect(() => {
        if (map){
            const legend = L.control({ position: "bottomright" });
    
            legend.onAdd = () => {
                const div = L.DomUtil.create('div', 'info legend');
                div.innerHTML = 
                     '<h4>This is the legend</h4>' + 
                     '<b>Lorem ipsum dolor sit amet consectetur adipiscing</b>';
                return div;
            }
    
            legend.addTo(map);
        }
    },[]);
    return null
}

export default Legend

Map CSS:

.leaflet-container {
     width: 100vw;
     height: 100vh;
}

Legend CSS:

.info {
    padding: 6px 8px;
    font: 14px/16px Arial, Helvetica, sans-serif;
    background: white;
    border-radius: 5px;
}

.legend {
    text-align: left;
    line-height: 18px;
    color: #555;
}

I don't get any errors but the legend can not be seen.

Answer 1

Try placing the map instances in the dependency arrray. In the first render map is null therefore the legend cannot be added to the map.

function Legend({ map }) {
  console.log(map);
  useEffect(() => {
    if (map) {
      const legend = L.control({ position: "bottomright" });

      legend.onAdd = () => {
        const div = L.DomUtil.create("div", "info legend");
        div.innerHTML =
          "<h4>This is the legend</h4>" +
          "<b>Lorem ipsum dolor sit amet consectetur adipiscing</b>";
        return div;
      };

      legend.addTo(map);
    }
  }, [map]); //here add map
  return null;
}

Demo