OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

The state and classes do not change in ReactJS

  • Thread starter Thread starter Chelovek 01
  • Start date Start date
C

Chelovek 01

Guest
App.jsx:

Code:
import { BrowserRouter as Router, Route, Routes, Navigate  } from 'react-router-dom'
import Leaderboard from './pages/Leaderboard'
import About from './pages/About'
import Scoresfeed from './pages/Scores-feed'
import Header from './components/Header/Header'
import './App.css'

const App = () => {
  return (
    <Router>
      <Header/>
      <Routes>
          <Route path="/about" element={<About />} />
          <Route path="/scores-feed" element={<Scoresfeed />} />
          <Route path="/" element={<Navigate to="/leaderboard" />} />
          <Route path="/leaderboard" element={<Leaderboard />} />
      </Routes>
    </Router>
  );
};

export default App;

Header.jsx:

Code:
import { useState, useEffect, useRef } from 'react';
import { Link } from 'react-router-dom';
import './Header.css';

const Header = () => {
    const [isNavOpen, setIsNavOpen] = useState(false);
    const navRef = useRef(null);

    useEffect(() => {
        const handleOutsideClick = (event) => {
            if (navRef.current && !navRef.current.contains(event.target)) {
                setIsNavOpen(false);
            }
        };

        document.addEventListener('click', handleOutsideClick);

        return () => {
            document.removeEventListener('click', handleOutsideClick);
        };
    }, [isNavOpen]);

    const handleNavToggle = () => {
        setIsNavOpen((isNavOpen) => !isNavOpen);
    };

    return (
        <header className="header">
            <div className="nav-toggle" onClick={handleNavToggle}>
                <svg
                    width="24"
                    height="24"
                    xmlns="http://www.w3.org/2000/svg"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    strokeWidth="2"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    className={`feather feather-chevron-down ${isNavOpen ? 'open' : ''}`}
                >
                    <polyline points="6 9 12 15 18 9"></polyline>
                </svg>
                <span className={`nav-toggle-label ${isNavOpen ? 'hidden' : ''}`}>Open navigation</span>
            </div>
            <nav ref={navRef} className={`nav ${isNavOpen ? 'open' : ''}`}>
                <ul className="nav-list">
                    <li className="nav-item">
                        <Link to="/leaderboard">
                            <svg
                                width="140"
                                height="50"
                                xmlns="http://www.w3.org/2000/svg"
                                viewBox="0 0 200 50"
                                preserveAspectRatio="xMidYMid meet"
                                className="svg-icon"
                            >
                                <rect x="5" y="40" width="5" height="5" fill="none" stroke="rgb(19, 65, 150)" strokeWidth="2" />
                                <rect x="180" y="5" width="5" height="5" fill="none" stroke="rgb(19, 65, 150)" strokeWidth="2" />
                                <line x1="1" y1="12" x2="12" y2="1" stroke="rgb(19, 65, 150)" strokeWidth="2" />
                                <line x1="179" y1="49" x2="190" y2="37" stroke="rgb(19, 65, 150)" strokeWidth="2" />
                                <polygon points="20,0 190,0 190,30 172,50 0,50 0,40 0,20" fill="none" stroke="rgb(19, 65, 150)" strokeWidth="3" className="svg-border" />
                                <text className='text' x="50%" y="50%" textAnchor="middle" fill="white" dy=".3em" fontSize="30">Leaderboard</text>
                            </svg>
                        </Link>
                    </li>
                    <li className="nav-item">
                        <Link to="/scores-feed">
                            <svg
                                width="140"
                                height="50"
                                xmlns="http://www.w3.org/2000/svg"
                                viewBox="0 0 200 50"
                                preserveAspectRatio="xMidYMid meet"
                                className="svg-icon"
                            >
                                <rect x="5" y="40" width="5" height="5" fill="none" stroke="rgb(19, 65, 150)" strokeWidth="2" />
                                <rect x="180" y="5" width="5" height="5" fill="none" stroke="rgb(19, 65, 150)" strokeWidth="2" />
                                <line x1="1" y1="12" x2="12" y2="1" stroke="rgb(19, 65, 150)" strokeWidth="2" />
                                <line x1="179" y1="49" x2="190" y2="37" stroke="rgb(19, 65, 150)" strokeWidth="2" />
                                <polygon points="20,0 190,0 190,30 172,50 0,50 0,40 0,20" fill="none" stroke="rgb(19, 65, 150)" strokeWidth="3" className="svg-border" />
                                <text className='text' x="50%" y="50%" textAnchor="middle" fill="white" dy=".3em" fontSize="30">Scores feed</text>
                            </svg>
                        </Link>
                    </li>
                    <li className="nav-item">
                        <Link to="/about">
                            <svg
                                width="140"
                                height="50"
                                xmlns="http://www.w3.org/2000/svg"
                                viewBox="0 0 200 50"
                                preserveAspectRatio="xMidYMid meet"
                                className="svg-icon"
                            >
                                <rect x="5" y="40" width="5" height="5" fill="none" stroke="rgb(19, 65, 150)" strokeWidth="2" />
                                <rect x="180" y="5" width="5" height="5" fill="none" stroke="rgb(19, 65, 150)" strokeWidth="2" />
                                <line x1="1" y1="12" x2="12" y2="1" stroke="rgb(19, 65, 150)" strokeWidth="2" />
                                <line x1="179" y1="49" x2="190" y2="37" stroke="rgb(19, 65, 150)" strokeWidth="2" />
                                <polygon points="20,0 190,0 190,30 172,50 0,50 0,40 0,20" fill="none" stroke="rgb(19, 65, 150)" strokeWidth="3" className="svg-border" />
                                <text className='text' x="50%" y="50%" textAnchor="middle" fill="white" dy=".3em" fontSize="30">About</text>
                            </svg>
                        </Link>
                    </li>
                </ul>
            </nav>
        </header>
    );
};

export default Header;

I have a component that needs to render a header. Inside it there is a svg “button” that should be toggled, thereby changing the state and adding/removing classes so that the menu is shown. But for some reason this doesn't happen.

But if I change the state directly through React DevTools, then the menu appears:

State: false

State: true

I tried changing the dependencies in useEffect but it didn't help. Classes are simply not added, and the state does not change. Please tell me what is the reason for my mistake

<p>App.jsx:</p>
<pre><code>import { BrowserRouter as Router, Route, Routes, Navigate } from 'react-router-dom'
import Leaderboard from './pages/Leaderboard'
import About from './pages/About'
import Scoresfeed from './pages/Scores-feed'
import Header from './components/Header/Header'
import './App.css'

const App = () => {
return (
<Router>
<Header/>
<Routes>
<Route path="/about" element={<About />} />
<Route path="/scores-feed" element={<Scoresfeed />} />
<Route path="/" element={<Navigate to="/leaderboard" />} />
<Route path="/leaderboard" element={<Leaderboard />} />
</Routes>
</Router>
);
};

export default App;

</code></pre>
<p>Header.jsx:</p>
<pre><code>import { useState, useEffect, useRef } from 'react';
import { Link } from 'react-router-dom';
import './Header.css';

const Header = () => {
const [isNavOpen, setIsNavOpen] = useState(false);
const navRef = useRef(null);

useEffect(() => {
const handleOutsideClick = (event) => {
if (navRef.current && !navRef.current.contains(event.target)) {
setIsNavOpen(false);
}
};

document.addEventListener('click', handleOutsideClick);

return () => {
document.removeEventListener('click', handleOutsideClick);
};
}, [isNavOpen]);

const handleNavToggle = () => {
setIsNavOpen((isNavOpen) => !isNavOpen);
};

return (
<header className="header">
<div className="nav-toggle" onClick={handleNavToggle}>
<svg
width="24"
height="24"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
className={`feather feather-chevron-down ${isNavOpen ? 'open' : ''}`}
>
<polyline points="6 9 12 15 18 9"></polyline>
</svg>
<span className={`nav-toggle-label ${isNavOpen ? 'hidden' : ''}`}>Open navigation</span>
</div>
<nav ref={navRef} className={`nav ${isNavOpen ? 'open' : ''}`}>
<ul className="nav-list">
<li className="nav-item">
<Link to="/leaderboard">
<svg
width="140"
height="50"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 200 50"
preserveAspectRatio="xMidYMid meet"
className="svg-icon"
>
<rect x="5" y="40" width="5" height="5" fill="none" stroke="rgb(19, 65, 150)" strokeWidth="2" />
<rect x="180" y="5" width="5" height="5" fill="none" stroke="rgb(19, 65, 150)" strokeWidth="2" />
<line x1="1" y1="12" x2="12" y2="1" stroke="rgb(19, 65, 150)" strokeWidth="2" />
<line x1="179" y1="49" x2="190" y2="37" stroke="rgb(19, 65, 150)" strokeWidth="2" />
<polygon points="20,0 190,0 190,30 172,50 0,50 0,40 0,20" fill="none" stroke="rgb(19, 65, 150)" strokeWidth="3" className="svg-border" />
<text className='text' x="50%" y="50%" textAnchor="middle" fill="white" dy=".3em" fontSize="30">Leaderboard</text>
</svg>
</Link>
</li>
<li className="nav-item">
<Link to="/scores-feed">
<svg
width="140"
height="50"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 200 50"
preserveAspectRatio="xMidYMid meet"
className="svg-icon"
>
<rect x="5" y="40" width="5" height="5" fill="none" stroke="rgb(19, 65, 150)" strokeWidth="2" />
<rect x="180" y="5" width="5" height="5" fill="none" stroke="rgb(19, 65, 150)" strokeWidth="2" />
<line x1="1" y1="12" x2="12" y2="1" stroke="rgb(19, 65, 150)" strokeWidth="2" />
<line x1="179" y1="49" x2="190" y2="37" stroke="rgb(19, 65, 150)" strokeWidth="2" />
<polygon points="20,0 190,0 190,30 172,50 0,50 0,40 0,20" fill="none" stroke="rgb(19, 65, 150)" strokeWidth="3" className="svg-border" />
<text className='text' x="50%" y="50%" textAnchor="middle" fill="white" dy=".3em" fontSize="30">Scores feed</text>
</svg>
</Link>
</li>
<li className="nav-item">
<Link to="/about">
<svg
width="140"
height="50"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 200 50"
preserveAspectRatio="xMidYMid meet"
className="svg-icon"
>
<rect x="5" y="40" width="5" height="5" fill="none" stroke="rgb(19, 65, 150)" strokeWidth="2" />
<rect x="180" y="5" width="5" height="5" fill="none" stroke="rgb(19, 65, 150)" strokeWidth="2" />
<line x1="1" y1="12" x2="12" y2="1" stroke="rgb(19, 65, 150)" strokeWidth="2" />
<line x1="179" y1="49" x2="190" y2="37" stroke="rgb(19, 65, 150)" strokeWidth="2" />
<polygon points="20,0 190,0 190,30 172,50 0,50 0,40 0,20" fill="none" stroke="rgb(19, 65, 150)" strokeWidth="3" className="svg-border" />
<text className='text' x="50%" y="50%" textAnchor="middle" fill="white" dy=".3em" fontSize="30">About</text>
</svg>
</Link>
</li>
</ul>
</nav>
</header>
);
};

export default Header;

</code></pre>
<p>I have a component that needs to render a header. Inside it there is a svg “button” that should be toggled, thereby changing the state and adding/removing classes so that the menu is shown. But for some reason this doesn't happen.</p>
<p>But if I change the state directly through React DevTools, then the menu appears:</p>
<p><a href="https://i.sstatic.net/5mo9urHO.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/5mo9urHO.png" alt="State: false" /></a></p>
<p><a href="https://i.sstatic.net/Z4Gblqjm.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/Z4Gblqjm.png" alt="State: true" /></a></p>
<p>I tried changing the dependencies in useEffect but it didn't help. Classes are simply not added, and the state does not change. Please tell me what is the reason for my mistake</p>
 

Latest posts

S
Replies
0
Views
1
Safwan Aipuram
S
Top