How does the third argument of React.Children.forEach work?

[VaJoy]

I've found out that React.Children.map/forEach has an optional argument as [, object thisArg] which could set this to another object through Top-Level API, then I try to run the code below:

        var obj = {
            num : 3
        };

        var Component = React.createClass({
            deal : function(){
                console.log(this, this.num);  //it`s NOT obj
            },
            render : function() {
                React.Children.forEach(this.props.children, this.deal, obj);
                return (<ul>
                          {this.props.children}
                        </ul>)
            }
        });

        React.render(
            (
                <Component>
                    <li>0</li>
                    <li>1</li>
                    <li>2</li>
                </Component>
            ), document.body
        )

it logs three times of Constructor undefined and I have no idea why they are not obj 3.

so how does the third argument of React.Children.forEach work?

[fkling]

It works exactly how you expect it to work and how the native forEach and e.g. map methods: It sets this of the callback to the provided value.

The reason why it does not work for this.deal is rather simple: If you use React.createClass, all methods are auto-bound. Hence it is not possible later on to change the value of this inside those methods (e.g. via .call or .apply).

Recap:

• auto-binding is React-specific
• not being able to override this of bound functions is normal JavaScript behavior

[VaJoy]

thx a lot, now it runs as I expected:

        var Component = React.createClass({
            render : function() {
                React.Children.forEach(this.props.children, function(){ //independent callback
                    console.log(this);  //now it`s obj :)
                }, obj);
                return (<ul>
                          {this.props.children}
                </ul>)
            }
        });