onClick attached to hyperlink does not run

Question

When I click the <a href onClick>Fire</a> or <a href onClick>Storm</a>, the console should receive !!!!!!!!!!!!! from toggle(), but it does not. Any idea why that is?

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

    
    const toggle = (index) => {
        console.log('!!!!!!!!!!!!!');
        setIdx(idx.filter((ev) => ev.categories[0].id === index));
    }
    

    return (
        <div>
            <div id="mySidenav" className="sidenav">
                <a href="" id="Fire" onClick = {() => toggle(10)}>Fire</a>
                <a href="" id="Storm" onClick = {() => toggle(8)}>Storm</a>
            </div> 
 
            <Header/>
            {/*reload this component*/}
            <div className="map">
                <GoogleMapReact
                    bootstrapURLKeys={{ key: process.env.REACT_APP_API_KEY }}
                    defaultCenter={ center }
                    defaultZoom={ zoom }
                >
            {idx.map((ev, index) => {
                if(ev.categories[0].id === 8 || ev.categories[0].id === 10) {
                    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);
                    }} />
                }
            })}
                </GoogleMapReact>
 
                {infoBox && 
                    <div  onClick={()=> setInfoBox(!infoBox)}>
                        {locationInfo && <LocationInfoBox info={locationInfo}/>}
                    </div>
                }
            </div>
        </div>
    )
}

Are you getting any errors? Pasting this (mostly) into a playground works: https://codesandbox.io/s/cocky-proskuriakova-bx09f?file=/src/App.js — Tom, Jan 23 '21 at 21:22
@Tom it took me an hour but it turns out I need an empty value for the hyperlink, I added a `#` ` toggle(10)}>Fire` — Kabocha Porter, Jan 23 '21 at 21:28

score 1 · Accepted Answer · answered Jan 23 '21 at 22:54

1

It is not required to add the href attribute. The onClick event will be fired:

<a onClick={()=> console.log("click")}>Fire</a>

If you won't use it then you don't need to put it.

answered Jan 23 '21 at 22:54

lissettdm

12,267
1
18
39

score 0 · Answer 2 · edited Jan 23 '21 at 23:03

0

Add a # to the href attribute instead of leaving it empty

<a href="#" onClick={handleClick}>Click me</a>

https://reactjs.org/docs/handling-events.html

edited Jan 23 '21 at 23:03

lissettdm

12,267
1
18
39

answered Jan 23 '21 at 21:29

Kabocha Porter

301
3
8

1

Also, [this](https://stackoverflow.com/questions/134845/which-href-value-should-i-use-for-javascript-links-or-javascriptvoid0). – bkis Jan 23 '21 at 21:31

onClick attached to hyperlink does not run

2 Answers2