ReactJS: how using queryselector variable out a function - reactjs

Question

I'm using this code:
export default function Naviguation() {
const overBtnMenu = () => {
const navBars = document.querySelectorAll('.nav-bars')
for (let i = 0; i < navBars.length; i++) {
navBars[i].style.width = '40px'
}
}
const outBtnMenu = () => {
const navBars = document.querySelectorAll('.nav-bars')
navBars[0].style.width = '20px'
navBars[1].style.width = '30px'
navBars[2].style.width = '20px'
}
return (
<nav>
<img src={img} className='nav-logo' alt="logo" />
<div className='nav-btn-menu' onMouseEnter={overBtnMenu} onMouseLeave={outBtnMenu}>
<span className='nav-barTop nav-bars'></span>
<span className='nav-barMiddle nav-bars'></span>
<span className='nav-barBottom nav-bars'></span>
</div>
</nav>
)
}
the code runs correctly but I want to use the variable "navBars" once time like this
export default function Naviguation() {
const navBars = document.querySelectorAll('.nav-bars')
const overBtnMenu = () => {
for (let i = 0; i < navBars.length; i++) {
navBars[i].style.width = '40px'
}
}
const outBtnMenu = () => {
navBars[0].style.width = '20px'
navBars[1].style.width = '30px'
navBars[2].style.width = '20px'
}
return (
<nav>
<img src={img} className='nav-logo' alt="logo" />
<div className='nav-btn-menu' onMouseEnter={overBtnMenu} onMouseLeave={outBtnMenu}>
<span className='nav-barTop nav-bars'></span>
<span className='nav-barMiddle nav-bars'></span>
<span className='nav-barBottom nav-bars'></span>
</div>
</nav>
)
}
But the code doesn't run because it wrote on the console "navBars undefined..."
How using a variable out the function to using it into my function?

Answer 1

In React you have the concept of useRef whenever you need to get the value of an actual DOM element.
Rewrite your component as below:
import { useEffect, useRef } from 'react';
export default function Navigation() {
const navBarsRef = useRef(null);
const navBars = navBarsRef.current;
useEffect(() => {
navBarsRef.current = document.querySelectorAll('.nav-bars');
}, []);
const overBtnMenu = () => {
for (let i = 0; i < navBars.length; i++) {
navBars[i].style.width = '40px';
}
};
const outBtnMenu = () => {
navBars[0].style.width = '20px';
navBars[1].style.width = '30px';
navBars[2].style.width = '20px';
};
return (
<nav>
<img src={img} className="nav-logo" alt="logo" />
<div className="nav-btn-menu" onMouseEnter={overBtnMenu} onMouseLeave={outBtnMenu}>
<span className="nav-barTop nav-bars"></span>
<span className="nav-barMiddle nav-bars"></span>
<span className="nav-barBottom nav-bars"></span>
</div>
</nav>
);
}

Answer 2

I wrote your code:
import React, { useEffect, useRef } from 'react';
import img from "../../images/logo-sanimex.webp";
import "./Naviguation.css";
export default function Navigation() {
const navBarsRef = useRef(null);
const navBars = navBarsRef.current;
useEffect(() => {
navBarsRef.current = document.querySelectorAll('.nav-bars');
}, []);
const overBtnMenu = () => {
for (let i = 0; i < navBars.length; i++) {
navBars[i].style.width = '40px';
}
};
const outBtnMenu = () => {
navBars[0].style.width = '20px';
navBars[1].style.width = '30px';
navBars[2].style.width = '20px';
};
return (
<nav>
<img src={img} className="nav-logo" alt="logo" />
<div className="nav-btn-menu" onMouseEnter={overBtnMenu} onMouseLeave={outBtnMenu}>
<span className="nav-barTop nav-bars"></span>
<span className="nav-barMiddle nav-bars"></span>
<span className="nav-barBottom nav-bars"></span>
</div>
</nav>
);
}
But it's still not working :(
console.log shows:
Uncaught TypeError: navBars is null
overBtnMenu Naviguation.js:15

Answer 3

I found the solution !! I just remove "null" from const navBarsRef = useRef()
Thanks very much for helping
import "./Naviguation.css";
export default function Navigation() {
const navBarsRef = useRef();
const navBars = navBarsRef.current;
useEffect(() => {
navBarsRef.current = document.querySelectorAll('.nav-bars');
}, []);
const overBtnMenu = () => {
for (let i = 0; i < navBars.length; i++) {
navBars[i].style.width = '40px';
}
};
const outBtnMenu = () => {
navBars[0].style.width = '20px';
navBars[1].style.width = '30px';
navBars[2].style.width = '20px';
};
return (
<nav>
<img src={img} className="nav-logo" alt="logo" />
<div className="nav-btn-menu" onMouseEnter={overBtnMenu} onMouseLeave={outBtnMenu}>
<span className="nav-barTop nav-bars"></span>
<span className="nav-barMiddle nav-bars"></span>
<span className="nav-barBottom nav-bars"></span>
</div>
</nav>
);
}