2
I’m having trouble sharing states between components using React Hooks. Can someone give me a help?
import React, { useState } from 'react'
import Nav from './Nav'
export default function Header(){
const [open, setOpen] = useState(false);
return(
<header className="header">
<div className="container">
<Nav/>
<div className="hamburger" id="hamburger-6" onClick={() => setOpen(!open)} className={open ? "is-active": ""}>
<span className="line"></span>
<span className="line"></span>
<span className="line"></span>
</div>
</div>
</header>
);
}
I need to share the state open with the Nav component
import React, { useState, useEffect } from 'react'
export default function Nav(){
const [open, setOpen] = useState(false);
return(
<nav className={open ? "header__nav active": "header__nav"}>
<Link to="/" className="header__nav--link" onClick={() => setOpen(!open)} >Início</Link>
<Link to="/sobre" className="header__nav--link" onClick={() => setOpen(!open)} >Sobre</Link>
<Link to="/habilidades" className="header__nav--link" onClick={() => setOpen(!open)} >Habilidades</Link>
<Link to="/projetos" className="header__nav--link">Projetos</Link>
<Link to="/contato" className="header__nav--link">Contato</Link>
</nav>
);
}
Rafael ball show, I managed to reach a solution using your example, thank you very much :D
– Claybson Bastos