functions are undefined inside react object

Question

I am trying to call imagesLoaded function (which is imported properly in the scripts area), but when calling it from inside a component prop, I get an error that it is indefined.

my code:

    var MasonryContainer = React.createClass({

    imagesLoadedFunc: function() { //omitting the imageloaded call here fix everything
                  this.imagesloaded();
                  this.refs[reference].getDOMNode().imagesLoaded(function() {
                   this.masonry.layout()
                     });

    },
    componentDidMount: function() {
                if (!isBrowser) return;
                this.initializeMasonry();
                this.performLayout();
                this.imagesLoadedFunc();
            },

    componentDidUpdate: function() {
                if (!isBrowser) return;

                this.performLayout();
                this.imagesLoadedFunc(this);
            },

            domChildren: [],

    initializeMasonry: function(force) {
        if (!this.masonry || force) {
            this.masonry = new Masonry(this.refs[reference].getDOMNode(), options);
            this.domChildren = this.getNewDomChildren();
        }
    },

    getNewDomChildren: function () {
        var node = this.refs[reference].getDOMNode();
        var children = options.itemSelector ? node.querySelectorAll(options.itemSelector) : node.children;

        return Array.prototype.slice.call(children);
    },

    diffDomChildren: function() {
        var oldChildren = this.domChildren;
        var newChildren = this.getNewDomChildren();
        var removed = oldChildren.filter(function(oldChild) {
            return !~newChildren.indexOf(oldChild);
        });

        var added = newChildren.filter(function(newChild) {
            return !~oldChildren.indexOf(newChild);
        });

        var moved = [];

        if (removed.length === 0) {
            moved = oldChildren.filter(function(child, index) {
                return index !== newChildren.indexOf(child);
            });
        }
        this.domChildren = newChildren;
        return {
            old: oldChildren,
            'new': newChildren, // fix for ie8
            removed: removed,
            added: added,
            moved: moved
        };
    },

    performLayout: function() {
        var diff = this.diffDomChildren();

        if (diff.removed.length > 0) {
            this.masonry.remove(diff.removed);
            this.masonry.reloadItems();
        }

        if (diff.added.length > 0) {
            this.masonry.appended(diff.added);
        }

        if (diff.moved.length > 0) {
            this.masonry.reloadItems();
        }

        this.masonry.layout();
    },


    componentWillReceiveProps: function() {
        setTimeout(function() {
            this.masonry.reloadItems();
            this.forceUpdate();
        }.bind(this), 0);
    },

    render: function () {
        return (
            <div className="content" ref="masonryContainer">
                <div className='Item'>
                    <img src="/img/gallery/3.jpg"></img>
                </div>
                <div className='Item'>
                    <img src="/img/gallery/11.jpg"></img>
                </div>
                <div className='Item'>
                    <img src="/img/gallery/12.jpg"></img>
                </div>
                <div className='Item'>
                    <img src="/img/gallery/12.jpg"></img>
                </div>
                <img src="/img/gallery/4.jpg"></img>
                <img src="/img/gallery/5.jpg"></img>
                <img src="/img/gallery/6.jpg"></img>
                <img src="/img/gallery/7.jpg"></img>
                <img src="/img/gallery/8.jpg"></img>
                <img src="/img/gallery/9.jpg"></img>
            </div>
        );
    }
});
    React.render(
    <MasonryContainer/>, document.getElementById('reactbody')
    )
</script>

if I call the imageloaded constructor outside of the react component, it is working. What am I missing?

Answer 1

Your calling imagesloaded using this,

this.imagesloaded();

However, imagesloaded is not part of your component, nor a standard in React. Thus, this.imagesloaded is undefined, since it never has been declared. Try removing the "this" part of the statement.

 imagesLoadedFunc: function() {
     imagesloaded();
     //the rest of the method
 },