How to fly to a location in react-leaflet

So I’m really new to react and leaflet but all I want to do is basically have the user enter some input, and after they press enter, trigger an event which then flies to the coordinates generated from that input. I am using geocode and the lat long coordinates are successfully generating. However I a not sure how to make the map fly to that location. Here is what I have so far:

import './App.css';
import * as React from "react";
import { ChakraProvider } from "@chakra-ui/react";
import { MapContainer, TileLayer, Marker, Popup, useMapEvents } from 'react-leaflet'
import 'leaflet/dist/leaflet.css'
import Geocode from "react-geocode";
import SearchBar from './SearchBar';

class App extends React.Component {
  constructor(props){
    super(props)
    this.state = {
      position: [43.653225, -79.383186]
    }
  }
  mapRef = React.createRef();

  changePos (pos) {
    this.setState({position: pos});
    this.mapRef.current.flyTo(pos);
  }

  render () {
    return (
      <ChakraProvider resetCSS = {false}>
        <div className = "App">
          <div id="title">
            <h1>
              CovidStopSpots
            </h1>
              <p>A responsive tracker for Covid-19.</p>
          <SearchBar changePos = {this.changePos.bind(this)}></SearchBar>
          </div>
          <div id="map">
            <MapContainer center={this.state.position} zoom={13} scrollWheelZoom={false} ref={this.mapRef}>
              <TileLayer
                attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
                url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
              />
              <Marker position={[43.653225, -79.383186]}>
                <Popup>
                  A pretty CSS3 popup. <br /> Easily customizable.
                </Popup>
              </Marker>
            </MapContainer>
          </div>
      </div>
      </ChakraProvider>
    )
  }
}

export default App;

also the current code is generating this error:

Unhandled Rejection (TypeError): Cannot read property 'flyTo' of null

162 thoughts on “How to fly to a location in react-leaflet”

  1. Pretty section of content. I simply stumbled upon your weblog and in accession capital to claim that I
    get in fact enjoyed account your weblog posts. Any way I’ll be subscribing to your augment and
    even I success you get right of entry to consistently quickly.

    Reply
  2. Pingback: hivpos
  3. Magnificent goods from you, man. I’ve understand your stuff previous to and you are just too excellent. I really like what you have acquired here, certainly like what you are stating and the way in which you say it. You make it entertaining and you still care for to keep it smart. I can not wait to read far more from you. This is really a great website.

    Reply
  4. It’s a shame you don’t have a donate button! I’d without a doubt donate to this outstanding blog! I suppose for now i’ll settle for book-marking and adding your RSS feed to my Google account. I look forward to brand new updates and will talk about this blog with my Facebook group. Chat soon!

    Reply
  5. Excellent post. I was checking constantly this blog and I am impressed! Very helpful information particularly the last part 🙂 I care for such info much. I was seeking this certain information for a long time. Thank you and good luck.

    Reply
  6. Pingback: vidos games sex