React Ref undefined even after assigning it

Question

I have 3 components that have a 'Map component' as a child. In all three components, I assign ref to the Map component, but when I try to access the ref.current it returns undefined. Here is one of the three components:

FullMap.js:

import React, { Component } from 'react';
import Map from '../Components/Map'
import './FullMap.css'
import parkIcon from '../pins/parkIcon.png'
import serviceIcon from '../pins/serviceIcon.png'
import shopIcon from '../pins/shopIcon.png'
import gpark from '../pins/gpark.png'
import gservice from '../pins/gservice.png'
import gshop from '../pins/gshop.png'

export default class FullMap extends Component{

    constructor(props) {
        super(props);
        this.child = React.createRef();
    }
    componentDidMount(){
        document.addEventListener('fullscreenchange', (event) => {
            if (document.fullscreenElement) {
              console.log(`Element: ${document.fullscreenElement.id} entered full-screen mode.`);
            } else {
                this.setState({fullScreen: false})
            }
          });
    }

    render(){
   
        return(
            <div>
                <div style={{height:'fit-content',padding:'25px',backgroundColor:'#2c3e40',color:'white'}}>
                    <div style={{display:'inline-block'}}>
                        <Map ref={this.child} canAddPoint={false} points={[]} place={this.state.place} dontShop={this.state.shop} dontPark={this.state.park} dontService={this.state.service} cngPark={this.park} cngService={this.service} cngShop={this.shop} changeStatePlace={this.stateClicked} stateClick={this.state.state} fullScreen={this.state.fullScreen} exitFull={this.exitFull}/>

                        <button className='btn draw-border' style={{color:'white',boxShadow:'inset 0 0 0 4px white',width:'140px',fontSize:'13px',margin:'auto',marginTop:'30px',marginBottom:'20px'}} onClick={()=>this.fullScreen()}>Full-screen мапа</button>
                        <p style={{display:'block',fontSize:'9px',textAlign:'center'}}>Full-screen опцијата не е подржана за мобилни телефони</p>
                    </div>
                </div>
            </div>
        )
    }
}

There is a full-screen button that calls a function from the Map component, but it always throws an error even though the ref is assigned:

 <Map ref={this.child} .../>

Map.js:

import React, { Component } from 'react';
import mapboxgl, { Marker } from 'mapbox-gl'
import './site.css'
import 'mapbox-gl/dist/mapbox-gl.css'
import * as turf from '@turf/turf'
import firebase from 'firebase'


class Map extends Component{
    constructor(props) {
        super(props);
        this.map = React.createRef();
        this.mainMarker = React.createRef();
        this.placeMarkers = React.createRef();
    }
    state={
        markers: [],
        places: [],
        bikeLanes: []
    }
    requestFullScreen = ()=>{
        const container = this.map.getContainer();
        const rfs =
        container.requestFullscreen ||
        container.webkitRequestFullScreen ||
        container.mozRequestFullScreen ||
        container.msRequestFullscreen;

        rfs.call(container);
    }

    addPoint = () =>{
        const marker = new mapboxgl.Marker()
            .setLngLat(this.map.getCenter())
            .addTo(this.map);
        const coords = [...this.props.points];
        coords.push(this.map.getCenter())
        this.props.updatePoints({points: coords})
        const allMarkers = [...this.state.markers]
        allMarkers.push(marker);
        this.setState({markers: allMarkers})
    }

    render(){
      
    if(!this.props.smol){
        return(
            <div className='mapDiv'>
                <div ref={el => this.mapContainer = el} className="mapContainer">
                    {fullScreen}
                </div>
            </div>
    )}else{
        return(
            <div className='mapDiv' style={{width:'100%',height: '300px'}}>
                <div ref={el => this.mapContainer = el} className="mapContainer">
                    {fullScreen}
                </div>
            </div>
            )
    }
}

}

export default withRouter(Map);

Answer 1

This issue is related to the withRouter HOC that is not forwarding the ref, you could read about it here

here is the workaround for this problem :

const withRouterAndRef = (Wrapped) => {
  const WithRouter = withRouter(({ forwardRef, ...otherProps }) => (
    <Wrapped ref={forwardRef} {...otherProps} />
  ));
  const WithRouterAndRef = React.forwardRef((props, ref) => (
    <WithRouter {...props} forwardRef={ref} />
  ));
  const name = Wrapped.displayName || Wrapped.name;
  WithRouterAndRef.displayName = `withRouterAndRef(${name})`;
  return WithRouterAndRef;
};

export default withRouterAndRef(Map);

So you should create the WithRouterAndRef HOC and use it to export the Map !