OnClick do not re-render the map

[alikucukavci]

Hi,

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);