Component not rendering with onClick event React

Question

So I'm using google-map-react and trying to get a popup to show when I click on an icon that I have plotted on the map. Right now, if you click the icon, the console logs it correctly but nothing is showing up. Here's a snippet of code

  const ToolTip = ({name, address, info}) => <div>
    <h1>{name}</h1>
    <h2>{address}</h2>
    <p>{info}</p>
    </div>;
  var showToolTip = (name) =>  {
    currentToolTip = name
    console.log(currentToolTip === name)
  }
  var currentToolTip = ""
  const directory = places.map((data) => {
    //category - Directory
    if ((data.category === ButtonTitle.CampusSeeking) && data.deptMarker === "")
      return (
        <div lat={data.latitude}
        lng={data.longitude}>
        <Pin
        lat={data.latitude}
        lng={data.longitude}
          color={blue} 
          height="25px"
          width="25px"
          onClick = {() => showToolTip(data.name)}
        />
        {currentToolTip === data.name &&
        <ToolTip
        lat={data.latitude}
        lng={data.longitude}
        name = {data.name}
        address = {data.address}
        info = {data.info}>
        </ToolTip>}
        </div>
        
      );
......


return  (         
{loc === ButtonTitle.CampusSeeking && directory} )

Answer 1

You may need to change currentToolTip to be a state instead of a local variable var currentToolTip = "" to trigger render if name changed

const [currentToolTip, setCurrentToolTip] = useState("")
var showToolTip = (name) =>  {
    setCurrentToolTip(name)
}

Answer 2

You need to use state:

// replace
var currentToolTip = ""

// with
const [currentTooltip,setCurrentTooltip] = React.useState("");

and

  var showToolTip = (name) =>  {
    setCurrentTooltip(name)
  }

Answer 3

Keep currentTooltip as a state instead of a normal variable.

const [currentToolTip, setCurrentToolTip] = useState(null);

And then change this onClick on the icon.

<Pin
  ...
  ...
  ...
  onClick = {() => setCurrentToolTip(data.name)}
>

Because states and props can cause re-render but the normal variable can't. That's why your currentToolTip === data.name this logic is getting false every time. Hence the tooltip is not rendering.