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

CodePudding user response：

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.

CodePudding user response：

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