How can I access the let number whilst it's outside of the render function to pass down to check if
const Navbar = () => {
const getID = async (id) => {
let id_lang = id;
console.log(id_lang);
}
return (
<Nav>
<NavMenu>
{navname.map((el, index) => (
<NavItem key={index} >
<NavLinks to="/">
{
'1' === {id_lang} ? <p>{el.name_th}</p> : <p>{el.name_en}</p>
//get id_lang for check if here.....
}
</NavLinks>
</NavItem>
))}
<NavItem >
<NavLinksLang >
<DropdownMenu className='dropdownMenu'>
{language.map((el) => (
<DropdownLink onClick={ () => getID(el.id)} >
{el.lang_name}
</DropdownLink>
))}
</DropdownMenu>
</NavLinksLang>
</NavItem>
</NavMenu>
</Nav>
)
}
export default Navbar
you can use global, syntax is
let window.id_lang = id;
this will make id_lang a global varibale which will enable you to access it outside of scope.
remember you will have to use window.id_lang everytime to use the variable.
variables are scoped and accessible depending on the level at which they have been declared.
When you create a component and declare a variable at the top level of a component, that variable is accessible by all following code. However, declaring a variable in the scope of an internal function limits the scope purely to that function
const MyComponent = () => {
var myVariable = 'hello';
function myFunction() {
var myScopedVariable = 'goodbye';
console.log(myScopedVariable);
console.log(myVariable);
}
console.log(myVariable) //this console logs 'hello'
console.log(myScopedVariable) //this console logs 'undefined' because it is out of scope
return <></>
}
According to your code, you have declared the id_lang variable in the scope of a function called getID. This means only getID can access and change this variable.
In order to access this variable outside of the scope of this function, you need to declare it at the component level (i.e, anywhere before the return). HOWEVER. Considering that variables are mutable, it is more likely you are looking to declare id_lang as a stateful variable. As such, you should write const [idLang, setIdLang] = useState('') and update the value of idLang using setIdLand(id) inside of your getID method
Thanks, It works, but how does it update the if check when the language is selected?
const [idLang, setIdLang] = useState('');
const getID = async (id) => {
let id_lang = id;
setIdLang(id_lang)
}
{navtxt.map((el, index) => (
<NavItem key={index} >
<NavLinks to="/" >
{
'1' === {idLang} ? <p>{el.name_th}</p> : <p>{el.name_en}</p>
}
</NavLinks>
</NavItem>
))}
<DropdownMenu className='dropdownMenu'>
{language.map((el, index) => (
<DropdownLink onClick={ () => getID(el.id)} >
{el.lang_name}
</DropdownLink>
))}
</DropdownMenu>