How can I do to display my search bar using react-leaflet?

Question

I am trying to use the react-leaflet library so I created a component SearchControl but it does not work unfortunately ...

Here is the code of my component :

import { useEffect } from "react";
import { useMap } from "react-leaflet";
import { GeoSearchControl } from "leaflet-geosearch";
import "react-leaflet-geosearch/lib/react-leaflet-geosearch.css";

const SearchControl = props => {
  const map = useMap();

  useEffect(() => {
    const searchControl = new GeoSearchControl({
      provider: props.provider,
      ...props
    });

    map.addControl(searchControl);
    return () => map.removeControl(searchControl);
  }, [props]);

  return null;
};
export default SearchControl;

But the problem is that I got the following error : _reactLeaflet.useMap is not a function.

How can I do to solve that ?

You can see the full code there : My code

Thank you very much for your help !

Answer 1

The dependencies in your package.json are outdated.

Change react-leaflet to use v3.2.0.
Plus, you need to include primitive react hooks (for useEffect), so react should build at least upon v16.8.0.

Here is an updated package.json:

{
  "name": "react-leaflet",
  "version": "1.0.0",
  "description": "",
  "keywords": [],
  "main": "src/index.js",
  "dependencies": {
    "leaflet": "1.7.1",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "react-leaflet": "3.2.0",
    "react-leaflet-fullscreen": "1.0.1",
    "react-leaflet-geosearch": "0.3.0",
    "react-scripts": "4.0.3"
  },
  "devDependencies": {},
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

Edit:

In addition to the comments, this is an updated index.js which uses MapContainer instead of Map:

import React from "react"; import ReactDOM from "react-dom"; import { MapContainer, TileLayer, Marker, Popup } from "react-leaflet"; import "./styles.css"; import { OpenStreetMapProvider } from "react-leaflet-geosearch"; import SearchControl from "./SearchControl";

const App = () => {   const prov = OpenStreetMapProvider();

  return (
    <div>
      <MapContainer center={[51.505, -0.091]} zoom={13}>
        <TileLayer
          attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
          url="https://{s}.tile.osm.org/{z}/{x}/{y}.png"
        />
        <SearchControl
          provider={prov}
          showMarker={true}
          showPopup={false}
          popupFormat={({ query, result }) => result.label}
          maxMarkers={3}
          retainZoomLevel={false}
          animateZoom={true}
          autoClose={false}
          searchLabel={"Enter address, please"}
          keepResult={true}
        />
      </MapContainer>
    </div>   ); };

const rootElement = document.getElementById("root"); ReactDOM.render(<App />, rootElement);