React google maps do not re-render onClick

Question

I am trying to run google-map-react in my application. The idea is when I open the page with google maps it should show me a heatmap with all the data. Then I have a dropdown list where I can pick data based on the weekday. So for example if I pick monday the google map should rerender the map and show me only data for mondays. The map is rendered correctly at the beginning but when I click the button in the dropdown list it doesnt rerender.

Is this a bug or am I doing something wrong? Hope that anyone can guide me here.

I have shared my code below. The first code shows the state I am passing to Maps component. The second code is the Maps component.

FIRST CODE

import React, { useState, useEffect } from 'react'
import Map from '../map/Map'
import data from '../../assets/data/heatmapData'
import Scatter from "../scatter-plot/Scatter";
import Dropdown from 'react-bootstrap/Dropdown';
import DropdownButton from 'react-bootstrap/DropdownButton';

import './content-section.css'

const ContentSection = () => {
  const [heatmapData, setHeatmapData] = useState(data);
  // useEffect(() => {
  //   handleWeekday()
  // }, [])

  const handleWeekday = (input) => 
  {
    console.log(input);
    const heatmapMondayData = [{ lat: 37.782551, lng: -122.44536800000003 },
    { lat: 37.782745, lng: -122.44458600000002 },
    { lat: 37.782842, lng: -122.44368800000001 },
    { lat: 37.782919, lng: -122.442815 }];

    setHeatmapData(heatmapMondayData ); 
  }

  return (
  <>
    <div className="container">
      <div className="header-text">This is a header</div>
      <Scatter />
      <Map center={{ lat: 37.775, lng: -122.434 }} zoom={13} positions={heatmapData} />
      <DropdownButton id="dropdown-basic-button" title="Dropdown button">
        <Dropdown.Item onClick={handleMonday}>Monday</Dropdown.Item>
 
      </DropdownButton>
    </div>
  </>
  )
}

export default ContentSection

SECOND CODE

import React, { Component } from "react";
import { Map, HeatMap, GoogleApiWrapper } from "google-maps-react";
import './map.css'

const gradient = [
    "rgba(0, 255, 255, 0)",
    "rgba(0, 255, 255, 1)",
    "rgba(0, 191, 255, 1)",
    "rgba(0, 127, 255, 1)",
    "rgba(0, 63, 255, 1)",
    "rgba(0, 0, 255, 1)",
    "rgba(0, 0, 223, 1)",
    "rgba(0, 0, 191, 1)",
    "rgba(0, 0, 159, 1)",
    "rgba(0, 0, 127, 1)",
    "rgba(63, 0, 91, 1)",
    "rgba(127, 0, 63, 1)",
    "rgba(191, 0, 31, 1)",
    "rgba(255, 0, 0, 1)"
  ];
  class MapContainer extends React.Component {
    render() {
      console.log(this.props)

      useEffect(() => {
        this.props.positions
      }, [])
      return (
            <div className="map-container">
                <Map
                google={this.props.google}
                zoom={this.props.zoom}
                initialCenter={this.props.center}
                >
                    <HeatMap
                    gradient={gradient}
                    positions={this.props.positions}
                    opacity={1}
                    radius={20}
                    />
          </Map>

          <div>{this.props.positions[0].lat}</div>

            </div>
      );
    }
  }
  
  export default GoogleApiWrapper({
    apiKey: "XXX",
    libraries: ["visualization"]
  })(MapContainer);

Answer 1

What is the purpose of the useEffect inside MapContainer? useEffect is for functional components while you used a class component for MapContainer. I would use functional components for all components if there's no specific reason for your choice of class component.

Please look at your ContentSection component, you called your handle function handleWeekday while you try to use handleMonday on the onClick for <Dropdown.Item> and expects an input which you didn't send. You can try:

<Dropdown.Item onClick={handleWeekday}>Monday</Dropdown.Item>

Which should invoke the function with an event as the input.