Component props is not being updated in react

Question

import React,{useEffect} from 'react'
import { Pin, Group } from './Pin';
import Cluster from './Cluster';

function ClusterGroupMain({textAsIcon,iconStyle,mapRef,onViewportChange,dataSet,icon,onClick,clickedMarkers }) {
    useEffect(()=>{
        console.log("Marker clicked-->>",clickedMarkers)
    })
    if(!mapRef || !dataSet) return null;
    return <div>
        <Cluster
            // props
        >
            {dataSet.map((dataPoint, i) => (
                <Pin
                    markerIndex = {i}
                    iconStyle={iconStyle}
                    onClick={onClick}

                    markerClicked={clickedMarkers&&clickedMarkers.length>0?clickedMarkers[i]:null}
                />
            ))}
        </Cluster>
    </div>
}

export default ClusterGroupMain

onClick={onClick} This statement updates clickedMarkers props very well as i have checked using console.log console.log("Marker clicked-->>",clickedMarkers) .

clickedMarkers is array of booleans. Initially all value will be false.

./Pin

import React from 'react';
import { Marker } from 'react-map-gl';

export class Pin extends Marker {
  render() {
    const {key,longitude,iconStyle,latitude,marker,markerIndex,onClick,markerAltText,markerClicked} = this.props
    let iconHeight = iconStyle?iconStyle.height:"40px";
    let iconWidth = iconStyle?iconStyle.width:"40px"
    return (
      <Marker key={key} longitude={longitude} latitude={latitude} offsetLeft={-10} offsetTop={-10}>
        <img style={{height:iconHeight,width:iconWidth}} src={marker} onClick={(e)=>onClick(e,markerIndex)} ></img>
        {
          !markerClicked&&markerAltText?<div style={{
            // some styling
          }}>
            <p>{markerAltText}</p>
          </div>:null
        }
      </Marker>
    );
  }
}

markerClicked in Pin component never gets updated. It's value always remains false. As react docs if state or props changes then the component will rerender with new values.

In ClusterGroupMain component clickedMarkers always gets updated. I have checked using console.log() . And, i am passing clickedMarkers[i] as markerClicked prop for every Pin component.

So, the problem is why markerClicked doesn't gets update if clickedMarkers does.

I have checked markerClicked using React dev tool , it always remains false while clickedMarkers ulways updates.

Answer 1

I'm guessing your are not creating a new array instance when updating the clickedMarkers array. If you mutate the array directly, react will not know the property has changed.

Try using the spread operator to create a new array instance when updating the clickedMarkers state in the onClick function.

onClick = (e, markerIndex) => {
    clickedMarkers[markerIndex] = True; // change value logic
    this.setState({clickedMarkers: [...clickedMarkers]}); // spread operator to create new array instance
}