Can not find function in reactjs

Question

I am getting error of Cannot read property 'clickHandler' of undefined

var FilterableProductTable = React.createClass({
        render: function() {
            var rows = [];
            this.props.products.forEach(function(product) {
                if( product.Control == "" || product.Control == undefined) {
                   rows.push(<tr colSpan = "2"  key = {product.Field}><th>{product.Field}</th><td></td></tr>); //rows.push( < ProductHeader product = { product } key = { product.Field } /> );
                }
                else {                           
                    var ControlTag;
                    if(product.Control == "textarea") {
                        ControlTag = <span><textarea rows="4" cols="18" id={ product.id } title={ product.id }></textarea><i className="fa fa-pencil changeSetting" title="Change control"></i></span> 
                    }
                    else if(product.Control == "select") {
                        ControlTag = <span><select style={{width: '60%'}} id={ product.id } title={ product.id }><option></option></select><i className="fa fa-pencil changeSetting" title="Change control"></i></span> 
                    }
                    else {
                        ControlTag=<span><input type="text" id={ product.id } title={ product.id }/><i className="fa fa-pencil changeSetting" title="Change control"></i></span> 
                    }
                rows.push(<tr colSpan = "2" key = {product.Field}><th>{product.Field}</th><td onClick={ this.clickHandler }>{ControlTag}</td></tr>);                          // rows.push( < ProductRow product = { product }  key = { product.Field } />);
                }
            });                
            return ( <table className={'tagsTable'}><tbody>{rows}</tbody></table> )
        },
        clickHandler: function(e){ alert(); }
   });

is there something missing in code?

Community · Accepted Answer · 2017-05-23 12:32:34Z

2

You are using forEach loop, so this inside loop will not be the component itself.

var FilterableProductTable = React.createClass({
        render: function() {
            var rows = [];
            var self = this; // <== new code
            this.props.products.forEach(function(product) {              
                // bunch of code..    
                // changed click to onClick={ self.clickHandler }
                rows.push(<td onClick={ self.clickHandler }>{ControlTag}</td>);
                // bunch of code..  
            });
        },
        clickHandler: function(e){ alert(); }
   });

Or set scope for forEach loop itself as suggested by Alexander T. Indeed i like it better than solution above

var FilterableProductTable = React.createClass({
        render: function() {
            var rows = [];
            this.props.products.forEach(function(product) {              
                // your code, without any modification
            }, this); // <== notice: this
        },
        clickHandler: function(e){ alert(); }
   });

edited May 23, 2017 at 12:32

CommunityBot

11 silver badge

answered Jun 15, 2016 at 10:29

Medet Tleukabiluly

12k3 gold badges38 silver badges78 bronze badges

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

2 Comments

Jeremy Thille Over a year ago

Damn, one minute too late.

Oleksandr T. Over a year ago

@Medet Tleukabiluly it is not necessary use additional variable var self = this; because you can set this for forEach callback through second argument [].forEach(function () { ... }, this) - developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

Jeremy Thille · Accepted Answer · 2016-06-15 10:31:16Z

1

It's because this is used inside a forEach function, so it refers to this function, not your React component. Use this little JS trick :

var self = this;

this.props.products.forEach(function(product) {
     <td onClick={ self.clickHandler }></td>
}

answered Jun 15, 2016 at 10:31

Jeremy Thille

26.4k12 gold badges48 silver badges64 bronze badges

Collectives™ on Stack Overflow

Can not find function in reactjs

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related