map.getCenter and map.getBounds are not functions inside map.target.on('click') function

Question

I am creating an app that makes use of the leaflet OpenStreetMap API but I am running into a problem. I am trying to get the center coordinates when I click my map, but i am getting the error: 'TypeError: map.getCenter is not a function', the same goes for 'TypeError: map.getCenter is not a function'. Below is my code.

import React, {Component} from 'react';
import L from 'leaflet';
import './App.css';
import leafGreen from './assets/leaf-green.png';
import leafRed from './assets/leaf-red.png';
import leafShadow from './assets/leaf-shadow.png';
import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';

class App extends Component {
  constructor() {
    super();
    this.state = {
      markers: [[51.505, -0.09]]
    };
  }

  greenIcon = L.icon({
    iconUrl: leafGreen,
    shadowUrl: leafShadow,
    iconSize:     [38, 95], // size of the icon
    shadowSize:   [50, 64], // size of the shadow
    iconAnchor:   [22, 94], // point of the icon which will correspond to marker's location
    shadowAnchor: [4, 62],  // the same for the shadow
    popupAnchor:  [-3, -76]
  });

  render() {
    return (
      <MapContainer 
        className="map"
        zoom={13} 
        center = {[51.505, -0.09]}
        whenReady={(map) => {
          console.log(map.getCenter())
          // var bounds = map.getBounds()
          // console.log(bounds.getCenter())
          map.target.on("click", function (e) {
            const { lat, lng } = e.latlng;
            var marker = L.marker([lat, lng], {icon: L.icon({
              iconUrl: leafRed,
              shadowUrl: leafShadow,
              iconSize:     [38, 95], // size of the icon
              shadowSize:   [50, 64], // size of the shadow
              iconAnchor:   [22, 94], // point of the icon which will correspond to marker's location
              shadowAnchor: [4, 62],  // the same for the shadow
              popupAnchor:  [-3, -76]
            })} ).addTo(map.target);
            marker.bindPopup("New one")
          });
        }}
        >
        <TileLayer
          attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
          url='http://{s}.tile.osm.org/{z}/{x}/{y}.png'
        ></TileLayer>
        {this.state.markers.map((position, idx) => 
          <Marker key={`marker-${idx}`} icon={this.greenIcon} position={position}>
          <Popup>
            <span>A pretty CSS3 popup. <br/> Easily customizable.</span>
          </Popup>
        </Marker>
        )}
      </MapContainer>
    );
  }
}

export default App;

Does anyone notice something I am doing incorrectly, I hope to hear from you.

Answer 1

When using the whenReady property, you need to use map.target as a prefix for getCenter(), which is different to the syntax of other props like whenCreated. I see you already kind of figured, but I would like to confirm in the code snippet below:

whenReady={(map) => {
          map.target.on("drag", function (e) {
            console.log(map.target.getCenter())
}