React-mapbox-gl: Accessing Map's “zoom” in a stateless functional component

[claytongroth]

I need to be able to access the current "Zoom" level of the map for dynamically rendering content. Is there a way I can do this in a stateless functional component? I have seen this question, which only applies to a class-component.

I've looked at current issues, tried giving the "map" in onStyleLoad to props and setting a global variable in onStyleLoad, none of those solutions seem to work.

const Map = ReactMapboxGl({
  accessToken: AT
 });
 const MapPortion = (props) => {
 const [mapOptions, setMapOptions] = useState({zoom: [4]});
 const someZoomFunction = () => {
  // do stuff to setMapOptions({})
 }
 return (
  <Map
      zoom={zoom}
      containerStyle={{
        height: "90%",
        width: "100%"
      }}
  />

 )
}

I'd like to not have to rewrite everything I have just to access zoom. Thanks in advance!

[claytongroth]

For anyone potentially also confused on this, this is how I got it to work:

This allows you to access the map object by assigning it to state and doing what you want to it in an effect that listens for changes in the map.

const [map, setMap] = useState(null);
....
 useEffect(()=>{
   console.log("MAP OBJECT: ", map)
 }, [map])
 const onMapLoad = (map) => {
   setMap(map)
 }
....
<Map
      style="mapbox://styles/mapbox/streets-v9"
      center = {dimensions.centroid}
      fitBounds = {dimensions.bbox}
      zoom={dimensions.zoom}
      onStyleLoad={ el => onMapLoad(el) }
>
...