Making a clickable header in React.js

Question

Im almost done with my portfolio using React, the code below is my Header.jsx component. Im trying to make it to where if i click contact or about, itll take me to that portion of the page. My code is below;

import React, {useState} from 'react'

const Header = () => {

const [active, setActive] = useState("nav_menu") const [icon, setIcon] = useState("nav_toggler")

const navToggle = () => {
    if(active === "nav_menu") {
        setActive("nav_menu nav_active")
    } else setActive("nav_menu")


    if(icon === "nav_toggler") {
        setIcon("nav_toggler")
    } else setIcon("nav_toggler")

}

return (
    <header>
        <div className='headContainer flexSB'>
            <div className='logo'>
                <img src="./images/services-portfolio.png" alt="" />
            </div>
            <nav>
                <ul className={active}>
                    <li><a href="/">Home</a></li>
                    <li><a href="/">About</a></li>
                    <li><a href="/">Portfolio</a></li>
                    <li><a href="/">Contact</a></li>
                </ul>
            </nav>
            <div onClick={navToggle} className={icon}>
                <i className="fas fa-bars"></i>
            </div>


        </div>
    </header>
)

}

export default Header

Answer 1

If your portfolio is all one page, then using hash tag links would work, ie

<a href="#about">About</a>

then set

id="about"

on the outer most element of the section of the page you want the link to go to.

---

If you have a sticky header on your site, this CSS Tricks article has some great tips about getting these links to work without the header cropping the top of the element the page is scrolling to.