Question

React toggle class błąd. Potrzebuję dynamicznie dodać klasę. Mam taki kod

import React, { useState } from 'react'
import { Link } from "react-scroll";

function Nav() {

    const [hamburger, setHamburger] = useState(false)

    let newClass = 'nav'
    const handleClick = () => {
        setHamburger(!hamburger)

        hamburger ? (newClass = 'nav', console.log('nav')) : (newClass = 'nav nav-background', console.log('back'))
        console.log('sss', newClass);
        return newClass
    }
    console.log('ppp', newClass);

    return (
        <div className={newClass}>
            <div className="ham-wrapper">
                <div onClick={handleClick} className='ham'>
                    <div className="ham1"></div>
                    <div className="ham2"></div>
                    <div className="ham3"></div>
                </div>
                <ul className='desktop-wrapper'>
                    <li><Link smooth={true} to="/">Home</Link></li>
                    <li><Link smooth={true} to="portfolio">Portfolio</Link></li>
                    <li><Link smooth={true} to="about">About</Link></li>
                    <li><Link smooth={true} to="contact">Contact</Link></li>
                </ul>
            </div>
        </div>
    )
}

export default Nav

Czy ktoś może widzi dlaczego mi to nie chodzi? 

Stan się zmienia prawidłowo ale klasa nie jest dodawana....:(

Answer 1

Gry robisz jakiś setState uruchamia się renderowanie komponentu w tym wypadku uruchamia się funkcja o nazwie Nav dlatego też linijkę 

hamburger ? (newClass = 'nav', console.log('nav')) : (newClass = 'nav nav-background', console.log('back'))

musisz umieścić w środku funkcji Nav. Czyli wyciągnąć ją ze środka handleClick.

Żeby zrobić to będzie profesjonalnie zrezygnował bym z zmiennej newClass i zrobił to tak 

    return (
        <div className={hamburger ? 'nav' : 'nav nav-background'}>
            <div className="ham-wrapper">

 

Comments

dzięki bardzo, działa!