I have an issue with the on click handler it triggers 3 times and doesn’t work in I am starting to get frustrated please

it’s in JSX I don’t know the issue or I might not understand the scopes of react I tried event listener but it also did not work

import "./Navbar.css"
import React from 'react'
  


function Navbar() {
    function scrolldown(){
        alert("d")
    }
    return (
        <div class="navbar">
            <a href="/"id="home" class="navbar a">home</a>
            <a onClick={scrolldown()}id="Contact-us"class="navbar a">Contact us</a>
        </div>
    )
}

export default Navbar

C

Answer

In your case onClick={scrolldown()} this means you will call scrolldown() in first render without click. If you want to scroll when html tag clicked then use callback . onClick={() => scrolldown()}

Alo you can do this without js actually. As i understood you want to scroll down to Contact section. Give the id=”some-id” to contact elemnt and then use #anchor. e.g. Contact

Leave a Reply

Your email address will not be published. Required fields are marked *