high order function in react(useState())

Question

I want to first initialize the location on a map(using latitude and longitude)

And it works as well

I can change Zoom + or - if I put default argument right on useState hook

const [viewport, setViewport] = useState({
    width: "100vw",
    height: "100vh",
    latitude: 47.608013,
    longitude: -122.335167,
    zoom: 8,
});

return (
    <ReactMapGL
      {...viewport}
      mapStyle="mapbox://styles/thecjreynolds/ck117fnjy0ff61cnsclwimyay"
      mapboxApiAccessToken={process.env.REACT_APP_MAPBOX_ACCESS_TOKEN}
      onViewportChange={setViewport}
      onDblClick={showAddMarkerPopUp}
    >
// ... more code here
    </ReactMapGL>
)

But when I put setViewport in another function(function initMap()).

onViewportChange={initMap} // changed here

The console didn't show any errors and warnings,

But I couldn't change the size of the map or move the map when click it.

const [viewport, setViewport] = useState();
function initMap() {
    setViewport({
      width: "100vw",
      height: "100vh",
      latitude: 47.608013,
      longitude: -122.335167,
      zoom: 8,
    });
};

return (
    <ReactMapGL
      {...viewport}
      mapStyle="mapbox://styles/thecjreynolds/ck117fnjy0ff61cnsclwimyay"
      mapboxApiAccessToken={process.env.REACT_APP_MAPBOX_ACCESS_TOKEN}
      onViewportChange={initMap}
      onDblClick={showAddMarkerPopUp}
    >
// ... more code here
    </ReactMapGL>
)

Plz, tell me why. Thanks.

your overriding state value and initial state value are same! so that you will not find any changes in UI — Sunil Kumar, Jan 06 '21 at 17:46
"I put setViewport in another function (function initMap())" I can't see the reason for doing that. you create a function that setViewport sets to same state all the time — buzatto, Jan 06 '21 at 18:23

score 1 · Answer 1 · answered Jan 06 '21 at 18:50

It looks like your trying to initialize the map from somewhere else, in which case the easiest option would be to move your hook higher up your component tree and pass down the props to ReactMapGL. You can look into using a callback, or refs to achieve the same thing but I rarely need to do it that way.

If you are only trying to wrap it in a function and pass it to ReactMapGL from the component you posted, make sure you are declaring the function inside your component like this:

export default function Map() {
    const [viewport, setViewport] = useState();
    function initMap() {
        setViewport({
          width: "100vw",
          height: "100vh",
          latitude: 47.608013,
          longitude: -122.335167,
          zoom: 8,
        });
    };
    return (
        <ReactMapGL
          {...viewport}
          mapStyle="mapbox://styles/thecjreynolds/ck117fnjy0ff61cnsclwimyay"
          mapboxApiAccessToken={process.env.REACT_APP_MAPBOX_ACCESS_TOKEN}
          onViewportChange={initMap}
          onDblClick={showAddMarkerPopUp}
        >
    // ... more code here
        </ReactMapGL>
    )
}

There may be some other thing happening under the hood of ReactMapGL that I'm not aware of though.

I did the same thing in the first place as you did, but still got bug tho — GBO, Jan 07 '21 at 14:17

score 0 · Answer 2 · answered Jan 11 '21 at 04:33

Every time the viewport "changes", it is being set to the original values again because the function is setting the viewport to the same values every time so the viewport will never actually change.

To get around this, you want to take the move event and get the new location and zoom of this and then set the viewport to these new values.

high order function in react(useState())

2 Answers2