Why outer variable isn't change dynamically when changing inside inner functions?

Question

I have this code which i use in react. The important things here is that the function returns two kfls, and the first has kezdet: 3, the second has kezdet: 2. But the lnkfl don't have this numbers. My idea was to create an outer scoped variable, the map sets it, then the end of the return, it will be the correct value, then, when the map of lnkfl processes the new element, the variable is set the new value, just before the return on the end needs it. But it isn't.

feladatsorok = () => {
        const {nézet, kozvetlenFl, feladatok, lnkfl} = this.state

        let kezdet;
        
        return lnkfl.map(lnkfl => {
            const sor = () => {
                return kozvetlenFl[nézet]
                .filter(kfl => kfl.lnkfl === lnkfl)
                .map(kfl => {
                
                
                
                    kezdet = kfl.kezdet //i want to use kfl.kezdet...
                    
                    
                    
                    const fl = () => {
                        return feladatok[nézet]
                        .filter(fl => fl.legnagyobbSzuloId === kfl.legnagyobbSzuloId)
                        .map(fl => {
                            return <div style={{
                                gridColumn: `${fl.sorkezdet + 1 } / span ${fl.hossz}`,
                                gridRow: fl.szint + "/ span 1",
                                border: "1px solid",
                                overflow: "hidden"
                            }}>
                                {fl.nev}
                            </div>
                        })
                    }
    
                    return <div style = {{
                        gridColumn: `${kfl.dk + 1} / span ${kfl.hossz}`,
                        backgroundColor: "purple",
                        gridRow: "1 / 2",
                        display: "grid",
                        gridTemplateColumns: `repeat( ${kfl.hossz} , 1fr)`,
                        gridTemplateRows: "repeat(" + kfl.sorok + ", 1fr)"
                    }}>
                        {fl()}
                    </div>
                })
            }
            console.log(kezdet)
            return <div style = {{
            
            
            
                gridRow: kezdet + " / span 1", //...here
                
                
                
                gridColumn: "start",
                display: "grid",
                gridTemplateColumns: feladatfilternezetalapjan(),
                gridTemplateRows: "1fr",
                backgroundColor: "yellow"
            }}>
                {sor()}
            </div>
        })
    }

The console returns undefined first, then 3. The expected values are 3, and 2. Inside the code snippet, i was shown that where the value of kezdet came from, and at the end, where i want to use it. What's the solution for this problem?

Please post code in English to make it easier to understand. — Bergi
– Bergi, Commented May 28, 2018 at 19:05
Did you mean to put the console.log inside that sor function? And no, creating mutable outer-scope variables is never a good idea. Please tell us what the actual problem that you're trying to solve. — Bergi
– Bergi, Commented May 28, 2018 at 19:08
I don't know why language is so important in this situation. I have a variable inside the first level scope of the function. At the third level scope i want to assign a value to the variable. At the end of the function i want to use the variable with the value. I don't know how to gain the value at the end of the function with the variable. So it will help if i translate kezdet to beginning? I don't think so. — Gergő Horváth
– Gergő Horváth, Commented May 28, 2018 at 19:13
Everyone picks speaking variable names for a reason: because it supports read- and understandability of code. Your variable names will neither be speaking nor helping for 99,99% of SO users. — connexo
– connexo, Commented May 28, 2018 at 19:24

score 1 · Accepted Answer · 2018-05-28 19:30:28Z

1

Well, you're essentially setting kezdet inside a .sor. But you're calling the .sor after you first use your kezdet --

return <div style = {{            
  // for the first 'lnkfl.map' element, 'kezdet' is still undefined here         
  gridRow: kezdet + " / span 1", 
  gridColumn: "start",
  display: "grid",
  gridTemplateColumns: feladatfilternezetalapjan(),
  gridTemplateRows: "1fr",
  backgroundColor: "yellow"
  }}>
     {sor()} // setting 'kezdet' for the first time
  </div>

So your kezdet is always "one value late".

edited May 28, 2018 at 19:30

answered May 28, 2018 at 19:24

user9539019

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Why outer variable isn't change dynamically when changing inside inner functions?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related