How to change language in functional ReactComponent?

[Coospir]

Hello!
Please, can you help me to resolve the problem: I can't add defaultLanguage prop from MapboxLanguage.
I am using a functional component. As I saw in example, there was a class component and using componentDidMount() to add this functionality. How can I do it in functional component?

...
let mapboxobj =this.mapRef.getMap();
    mapboxobj.addControl(new MapboxLanguage({
        defaultLanguage: 'ru'
}));

return (
        <div>
            <Burger/>
            <ReactMapGL
                {...viewport}
                mapboxApiAccessToken={token}
                onViewportChange={nextViewport => {setViewport(nextViewport); getData(nextViewport)}}
                mapStyle='someStyles'
                doubleClickZoom={false}
                ref={map => this.mapRef = map}
            >
            ....

Thank you!

[mendozaline]

Try something like this:

  const mapRef = useRef(null);
  useEffect(() => {
    if (mapRef && mapRef.current) {
      const map = mapRef.current.getMap();
      map.addControl(new MapboxLanguage({ defaultLanguage: "ru" }));
    }
  }, [mapRef]);

[ericjames]

This still doesn't apply the translation. It seems like the object passed from mapRef.current or mapRef.current.getMap(); is either not actually the instance in the component, or the component doesn't re-load the map tiles.

[ericjames]

I got it! The new package syntax requires you to use their useControl method.

ie:

<Map ...>
    <MapLanguageControl />
</Map>

function MapLanguageControl() {
    useControl(() => new MapboxLanguage({ defaultLanguage: "fr" }));
    return null;
}

However technically, they say you are allowed to manipulate these "hidden" methods if you use getMap() but it appears not to be the case here, probably because the map state is controlled by this internal method.

[Pessimistress]

If you are using v7 you can just use http://visgl.github.io/react-map-gl/docs/api-reference/map#rtltextplugin