JavaScript Cannot access variable in multiple value return statement

Question

My application is crashing because of the second part of this render statement c is not defined (after the comma in return).

I want to render not only this element as the CategoryTreeFork component, but also render it's children along-side it as the same component.

Am I making a mistake in trying to access that variable?

<div className="categories-narabikae">
    <p>Displayed Categories </p>
    {   
        filterActiveCategories(categories).map((c, idx) =>  
            <CategoryTreeFork 
                key={idx}
                parentCat={null}
                thisCat={c}
                level={1}
                dropEvent={this.handleDropEvent}
            />

            ,   

            c.children 
                ? c.children.map( (c2, idx) =>
                <CategoryTreeFork
                    key={idx}
                    parentCat={c}
                    thisCat={c2}
                    level={2}
                    dropEvent={this.handleDropEvent}
                />
            )   
            : null
        )   
    }   
</div>

Edit: it looks like during the first render of the page the array that I am mapping is empty (has not yet retrieved categories from API) -- would this possible trigger the error?

You cannot return multiple values from a function in JS. From the code you've provided, it looks like you're trying to do recursive rendering. I'd suggest the CategoryFork be called recursively, each time passing new children as prop. — Shobhit Chittora
– Shobhit Chittora, Commented Apr 12, 2018 at 4:54
Does it really not? I thought you could do return (val1, val2) in ES6. I have to avoid recursive components on this one so I think I will have to prepare the data in my array with additional attributes to get the desired effect with sibling components. — Daniel Thompson
– Daniel Thompson, Commented Apr 12, 2018 at 4:57
I thought you could do return (val1, val2) in ES6 You can, but not in this way with React. See the comma operator. (discards all but the last item) — CertainPerformance
– CertainPerformance, Commented Apr 12, 2018 at 5:35
@CertainPerformance oh wow that's really useful, I never realized that's how it was being used. Well, pretty much answers my question if you wanna submit it. — Daniel Thompson
– Daniel Thompson, Commented Apr 12, 2018 at 6:00

CertainPerformance · Accepted Answer · 2018-04-12 06:08:36Z

1

it looks like during the first render of the page the array that I am mapping is empty (has not yet retrieved categories from API) -- would this possible trigger the error?

You're (accidentally) using the comma operator:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comma_Operator

The comma operator evaluates each of its operands (from left to right) and returns the value of the last operand.

So, the first CategoryTreeFork will be ignored by the interpreter; only the last value in a comma-separated list will actually be used.

answered Apr 12, 2018 at 6:08

CertainPerformance

373k55 gold badges354 silver badges359 bronze badges

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

Collectives™ on Stack Overflow

JavaScript Cannot access variable in multiple value return statement

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