Блог

Функция setvalue() из useState() не обновляет значение при использовании setValue (), хотя кажется, что оно изменилось на секунду и возвращается к значению по умолчанию, пожалуйста, кто-нибудь может рассказать, что здесь происходит

**то, что я здесь делаю, заключается в том, что я просто меняю стиль кода на полужирный (только кнопка, которая была нажата, а затем я делаю стиль кода других кнопок, которые не были нажаты как легкие (я реализовал эту вещь в навигационной панели **

 const [value, setvalue] = useState("home");

useEffect(() => {
    console.log("route has been changed");
    var technology = "web";

    // {
    //  matches == true ? (technology = "web") : (technology = "mobile");
    // }

    if (technology == "web") {
        var home = document.getElementById("home");
        var about_us = document.getElementById("aboutus");
        var competitive_programming = document.getElementById("dropdown-basic");
        var blog = document.getElementById("blog");
        if (loggedIn == false) {
            var login = document.getElementById("login");
        }
        console.log("bold value"   boldvalue)
        switch (boldvalue) {
            case "home":
                console.log("hello home");
                home.style.fontWeight = "600";
                about_us.style.fontWeight = "lighter";
                competitive_programming.style.fontWeight = "lighter";
                blog.style.fontWeight = "lighter";
                if (loggedIn == false) {
                    login.style.fontWeight = "lighter";
                }
                break;
            case "aboutus":
                console.log("hello about");
                home.style.fontWeight = "lighter";
                about_us.style.fontWeight = "600";
                competitive_programming.style.fontWeight = "lighter";
                blog.style.fontWeight = "lighter";
                if (loggedIn == false) {
                    login.style.fontWeight = "lighter";
                }
                break;
            case "blog":
                console.log("hello blog");
                home.style.fontWeight = "lighter";
                about_us.style.fontWeight = "lighter";
                competitive_programming.style.fontWeight = "lighter";
                blog.style.fontWeight = "600";
                if (loggedIn == false) {
                    login.style.fontWeight = "lighter";
                }
                console.log("hello blog");
                break;
            case "login":
                console.log("hello login");
                home.style.fontWeight = "lighter";
                about_us.style.fontWeight = "lighter";
                competitive_programming.style.fontWeight = "lighter";
                blog.style.fontWeight = "lighter";
                if (loggedIn == false) {
                    login.style.fontWeight = "600";
                }
                console.log("login style is "   login.style.fontWeight);
                break;
            case "competitive":
                console.log("hello competitive");
                home.style.fontWeight = "lighter";
                about_us.style.fontWeight = "lighter";
                competitive_programming.style.fontWeight = "600";
                blog.style.fontWeight = "lighter";
                if (loggedIn == false) {
                    login.style.fontWeight = "lighter";
                }
                break;
        }
    }
}, [value]);
//this thing executes whenever I click a button
async function SetBolds(e) {
    // var idid = document.getElementById(e.target.id)
    // console.log(e.target.id);
    var idid = e.target.id;
    // I have console.logged the target id its working fine

    switch (idid) {
        case "home":

            setvalue("home");
            break;
        case "aboutus":

            console.log("about us new")
            setvalue("aboutus");

            break;
        case "blog":
            boldvalue = "blog"
            console.log(boldvalue)
            setvalue("blog");
            break;
        case "login":
            boldvalue = "login"
            setvalue("login");
            break;
        case "dropdown-basic":
            boldvalue = "competitive"
            setvalue("competitive");
            break;
        default:
            setvalue("")
    }
}