Блог

Я молодой разработчик, пытаюсь создать свой первый веб-сайт с помощью reactjs и работаю над пользовательской навигационной панелью. Я бы хотел, чтобы кнопка, которую я нажимаю на панели навигации, меняла цвет после нажатия, в то время как все остальные остаются того же цвета, но мой код, похоже, не работает. Я использую useState для управления значениями имен классов (визуальных элементов) кнопок. Мой код:

 import React, { useState } from 'react';
import { Container, Col, Row, Button } from 'react-bootstrap';
import { Link, useHistory } from 'react-router-dom';
import '../App.css';

const NavButtons = () => {

    const [navbuttons, setnavbuttons] = useState([
        {id: 0, urlAdd: "/", name: "FORSIDE", show: "navlit"},
        {id: 1, urlAdd: "/priser", name: "PRISER", show: "navlif"},
        {id: 2, urlAdd: "/tilmeldning", name: "TILDMELDING", show: "navlif"},
        {id: 3, urlAdd: "/kontakt", name: "KONTAKT", show: "navlif"},
        {id: 4, urlAdd: "/faq", name: "FAQ", show: "navlif"}
    ]);

    let handleChange = index => {
        let currentbuttons = navbuttons;
        for(let i=0; i<currentbuttons.length; i  ){
            currentbuttons[i].show = i == index? "natlit":"natlif";
        }
        setnavbuttons(currentbuttons);
        console.log(currentbuttons[index].show)
    }

    let history = useHistory();

    return(
        <div>
            <div className="navul">
            {navbuttons.map(navbut => 
                <span 
                    className={navbut.show}
                    onClick={() => {
                        handleChange(navbut.id);
                        history.push(navbut.urlAdd);
                    }}
                    ><p/>{navbut.name}
                </span>)
                }
            </div>
        </div>
    );
}

export default NavButtons;
  

Когда я нажимаю кнопки, состояние меняется, но кнопки, похоже, не перерисовываются. Если бы вы могли понять, что я делаю неправильно, это было бы высоко оценено.

handleChange необходимо исправить, чтобы оно не меняло существующее состояние, а добавляло новые объекты на место старого состояния.

 let handleChange = index => {
    let currentbuttons = [...navbuttons];
    for(let i=0; i<currentbuttons.length; i  ){
        currentbuttons[i] = {...currentbuttons[i], show: i === index? "natlit":"natlif"};
    }
    setnavbuttons(currentbuttons);
}