Fixed reference error

src/utils/BooleanControl.tsx

@@ -1,7 +1,7 @@
-import { ChangeEvent, FC, useRef } from 'react';
+import { ChangeEvent, FC } from 'react';
 import classNames from 'classnames';
-import { v4 as uuid } from 'uuid';
 import { identity } from 'ramda';
+import { useDomId } from './helpers/hooks';
 
 export interface BooleanControlProps {
   checked?: boolean;
@@ -17,7 +17,7 @@ interface BooleanControlWithTypeProps extends BooleanControlProps {
 const BooleanControl: FC<BooleanControlWithTypeProps> = (
   { checked = false, onChange = identity, className, children, type, inline = false },
 ) => {
-  const { current: id } = useRef(uuid());
+  const id = useDomId();
   const onChecked = (e: ChangeEvent<HTMLInputElement>) => onChange(e.target.checked, e);
   const typeClasses = {
     'form-switch': type === 'switch',

src/utils/helpers/hooks.ts

@@ -2,6 +2,7 @@ import { useState, useRef, EffectCallback, DependencyList, useEffect } from 'rea
 import { useSwipeable as useReactSwipeable } from 'react-swipeable';
 import { useNavigate } from 'react-router-dom';
 import { parseQuery, stringifyQuery } from './query';
+import { v4 as uuid } from 'uuid';
 
 const DEFAULT_DELAY = 2000;
 
@@ -82,3 +83,8 @@ export const useGoBack = () => {
 
   return () => navigate(-1);
 };
+
+export const useDomId = (): string => {
+  const { current: id } = useRef(`dom-${uuid()}`);
+  return id;
+};

src/visits/helpers/OpenMapModalBtn.tsx

@@ -1,8 +1,8 @@
-import { useRef, useState } from 'react';
+import { useState } from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faMapMarkedAlt as mapIcon } from '@fortawesome/free-solid-svg-icons';
 import { Button, Dropdown, DropdownItem, DropdownMenu, UncontrolledTooltip } from 'reactstrap';
-import { useToggle } from '../../utils/helpers/hooks';
+import { useDomId, useToggle } from '../../utils/helpers/hooks';
 import { CityStats } from '../types';
 import MapModal from './MapModal';
 import './OpenMapModalBtn.scss';
@@ -17,7 +17,7 @@ const OpenMapModalBtn = ({ modalTitle, activeCities, locations = [] }: OpenMapMo
   const [mapIsOpened, , openMap, closeMap] = useToggle();
   const [dropdownIsOpened, toggleDropdown, openDropdown] = useToggle();
   const [locationsToShow, setLocationsToShow] = useState<CityStats[]>([]);
-  const buttonRef = useRef<HTMLElement>();
+  const id = useDomId();
 
   const filterLocations = (cities: CityStats[]) => cities.filter(({ cityName }) => activeCities.includes(cityName));
   const onClick = () => {
@@ -37,10 +37,10 @@ const OpenMapModalBtn = ({ modalTitle, activeCities, locations = [] }: OpenMapMo
 
   return (
     <>
-      <Button color="link" className="open-map-modal-btn__btn" ref={buttonRef as any} onClick={onClick}>
+      <Button color="link" className="open-map-modal-btn__btn" id={id} onClick={onClick}>
         <FontAwesomeIcon icon={mapIcon} />
       </Button>
-      <UncontrolledTooltip placement="left" target={(() => buttonRef.current) as any}>Show in map</UncontrolledTooltip>
+      <UncontrolledTooltip placement="left" target={id}>Show in map</UncontrolledTooltip>
       <Dropdown isOpen={dropdownIsOpened} toggle={toggleDropdown} inNavbar>
         <DropdownMenu end>
           <DropdownItem onClick={openMapWithLocations(false)}>Show all locations</DropdownItem>