Access child function within a default function

Devil's Dream 0
Viewed 17

I am trying to add some markers on Map. Here I have added a custom addMarker function. I want to pass myGeoJson param from a buttonClick of another component

export default function Map() {
  const mapContainer = useRef(null);
  const map = useRef(null);
  const [lng] = useState(91.638);
  const [lat] = useState(23.735);
  const [zoom] = useState(6.5);
  const [API_KEY] = useState('YOUR_MAPBOX_API_KEY');

  useEffect(() => {
    if (map.current) return;
    map.current = new mapboxgl.Map({
      container: mapContainer.current,
      style: `style.json`,
      center: [lng, lat],
      zoom: zoom,
      maxZoom: 22,
      minZoom: 6
    });
  });

  const addMarkers = (myGeoJson) => {
    map.current.addSource('points', {
      'type': 'geojson',
      'data': myGeoJson
    });
  
    // Add a symbol layer
    map.current.addLayer({
      'id': 'points-1',
      'type': 'symbol',
      'source': 'points',
      'layout': {
        'icon-image': 'icon-12',
        'text-field': ['get', 'title'],
        'text-font': [
          'roboto',
          'MuliBold'
        ],
        'text-offset': [0, 0.5],
        'text-anchor': 'top'
      }
    });
  }
  
  return (
    <div className="map-wrap">
      <div ref={mapContainer} className="map" />
    </div>
  );
}

Now the second container is

import {addMarkers} from './map'

export const SideBar = props => {
    ///getting myGeoJson data by calling API
    ...
    const onClick = () => {
        addMarkers(myGeoJson);
    };
    ...
    return (
      <div>
        <Button onClisk={onClick}>Draw Markers</Button>
      </div>
}

But the addMarkers() can not be accessible from Map()

mapbox-gl-js reactjs
1 Answers

You are pretty close to your solution. In order to access the addMarkers method from the Map component you should wrap it with a forwardRef.

Doing so can expose some methods to sibling components, like your Button

An working example can be found at code-sandbox

Example:

// Map.js
import { forwardRef, useImperativeHandle } from "react";

export const Map = forwardRef((props, ref) => {
  const addMarkers = (myGeoJson) => {
    console.log("addMarkers", myGeoJson);
    alert("Added marker: " + JSON.stringify(myGeoJson));
  };

  useImperativeHandle(ref, () => ({
    addMarkers
  }));

  return <div>map</div>;
});

// Button.js
export const Button = ({ onClick }) => {
  return (
    <div>
      <button onClick={onClick}>Draw Markers</button>
    </div>
  );
};

// App.js
import { Button } from "./Button";
import { Map } from "./Map";
import { useRef } from "react";

export default function App() {
  const mapRef = useRef(undefined);

  const onClick = () => {
    if (mapRef.current === undefined) return; // Map ref is not set yet

    mapRef.current.addMarkers({ lat: 123.345, lon: 44.345 });
  };
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <Button onClick={onClick} />
      <Map ref={mapRef} />
    </div>
  );
}
Xiduzo0
Related