React JS Access id_lang variable outside of scope?

Question

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

score 0 · Answer 1 · answered Dec 29 '21 at 09:13

0

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.

answered Dec 29 '21 at 09:13

Godz MadGOD

69
5

Mark Barton · Answer 2 · 2021-12-29T09:19:35.630

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

It works, but how does it update the if check when the language is selected? — tongchimlang, Dec 30 '21 at 02:16
React uses an immutable state. So when you do mutate it with useState, this triggers a re-render of your front-end code (which in turn runs any functions that may be tied to presentation login). https://reactjs.org/docs/state-and-lifecycle.html — Mark Barton, Dec 30 '21 at 09:09

score 0 · Answer 3 · answered Dec 30 '21 at 02:27

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>

React JS Access id_lang variable outside of scope?

3 Answers3