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

is your portfolio all one page? if so using hash tag would work, ie `About` then set `id="about"` on the outer most element of the about section — benmneb, Apr 24 '23 at 00:40
this code i pasted here is just the header component. but if you mean from the webpage itself, then yes. everything is on one page. — Damien Hebert, Apr 24 '23 at 02:08
this is what youre trying to do yeah? https://stackoverflow.com/questions/2835140/how-do-i-link-to-part-of-a-page-hash — benmneb, Apr 24 '23 at 04:09

score 0 · Answer 1 · answered Apr 25 '23 at 04:11

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.

Making a clickable header in React.js

1 Answers1