use state hooks to trigger a series of events

Question

This part is suppose to show different markers on the map when click on different buttons. I want to add a hook to trigger these re-render. The action takes place in the <a> and {alertIcon}. I want alertIcon to change to a different sets of markers when I click on the <a>, which has an onClick that uses the setAlertIcon function

const Map = ({ eventData, center, zoom }) => {
    const [locationInfo, setLocationInfo] = useState(null);
    const [infoBox, setInfoBox] = useState(true);
    const [alertIcon, setAlertIcon] = useState(); 

    function marker(idx) {return eventData.map((ev, index) => {
        if(ev.categories[0].id === idx) {
            console.log(idx);
            return <LocationMarker key = {index} lat={ev.geometries[0].coordinates[1]} lng={ev.geometries[0].coordinates[0]} onClick={() => {
                setLocationInfo({ id: ev.id, title: ev.title });
                setInfoBox(!infoBox);
            }} />
        }
        return null
    })}
    
   

    return (
        <div>
            <div id="mySidenav" className="sidenav">

                //click here and trigger event, pass parameter to function
                <a href="#" id="Fire" onClick = {() => {
                    setAlertIcon(()=>marker(10));
                }}>Fire</a>
                <a href="#" id="Storm">Storm</a>
            </div> 
 
            <Header/>
            {/*reload this component*/}
            <div className="map">
                <GoogleMapReact
                    bootstrapURLKeys={{ key: process.env.REACT_APP_API_KEY }}
                    defaultCenter={ center }
                    defaultZoom={ zoom }
                >
                    {alertIcon} //here is the proble
                                // supposed to make markers rerender upon onClick events
                </GoogleMapReact>
 
                {infoBox && 
                    <div  onClick={()=> setInfoBox(!infoBox)}>
                        {locationInfo && <LocationInfoBox info={locationInfo}/>}
                    </div>
                }
            </div>
        </div>
    )
}

Answer 1

You can change idx to state and replace alertIcon to marker()

Like this

const Map = ({ eventData, center, zoom }) => {
    const [locationInfo, setLocationInfo] = useState(null);
    const [infoBox, setInfoBox] = useState(true);
    const [idx, setIdx] = useState(); 

    function marker() {
      return eventData.map((ev, index) => {
        if(ev.categories[0].id === idx) {
            console.log(idx);
            return <LocationMarker key = {index} lat={ev.geometries[0].coordinates[1]} lng={ev.geometries[0].coordinates[0]} onClick={() => {
                setLocationInfo({ id: ev.id, title: ev.title });
                setInfoBox(!infoBox);
            }} />
        }
        return null
    })}
    
   

    return (
        <div>
            <div id="mySidenav" className="sidenav">

                //click here and trigger event, pass parameter to function
                <a href="#" id="Fire" onClick = {() => setIdx(10)}>Fire</a>
                <a href="#" id="Storm">Storm</a>
            </div> 
 
            <Header/>
            {/*reload this component*/}
            <div className="map">
                <GoogleMapReact
                    bootstrapURLKeys={{ key: process.env.REACT_APP_API_KEY }}
                    defaultCenter={ center }
                    defaultZoom={ zoom }
                >
                    {marker()}
                </GoogleMapReact>
 
                {infoBox && 
                    <div  onClick={()=> setInfoBox(!infoBox)}>
                        {locationInfo && <LocationInfoBox info={locationInfo}/>}
                    </div>
                }
            </div>
        </div>
    )
}