I have a table where when I click on a row of the table, I get the content/objects of the row which I am passing to the Dialog component that uses


to display the item's location based on the xy coordinate.

  const mapRef = useRef(null);

// makeshift data
  const rowData = {
    laty: 5.4959,
    longx: 7.0807,

  useEffect(() => {
    console.log(mapRef.current); // does not render the map methods/objects on first modal render
    if (mapRef.current) {
        lat: rowData?.laty,
        lng: rowData?.longx,
  }, [rowData]);

When clicked it shows the map, but the issue is that the mapref returns null on the first render, when I console.log(mapref) shows null instead of the available mapref objects which I can use such as flyTo(), setCenter() etc. I know it's supposed to show null on the initial render but not when I launch the Modal.

how can I solve this?

Please see sandbox for better context


2 Answers 2


Solved it, used useState instead of useRef, and it solved it.

const [map, setMap] = useState(null);

useEffect(() => {
    if (dss_rowData && map) {
        lat: Number(laty),
        lng: Number(longx),
  }, [rowData, map]);

ref={(ref) => setMap(ref)}

...just as a little extra clarification for anyone else having the same issue:

    ref={(ref) => setMap(ref)}
    // ... other Map props ...

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.