Can't call function in parent component from child component using React

Question

I have 2 files:

grid-body.jsx (GridBody) and grid-row.jsx (GridRow)

In GridBody, I declared a function showAlert which I pass to every GridRow:

var GridBody = React.createClass({
    showAlert: function(msg) {
        alert(msg);
    },

    render: function() {
        var rows = this.props.rows.map(function(li) {
            return (
                <GridRow showAlert={this.showAlert} />
            );
        });

        return (
            <div>
                {rows}
            </div>
        );
    }
});

And in GridRow:

var GridRow = React.createClass({
    toggle: function() {
        this.props.showAlert('HEY');        // -----> ERROR - not a function
    },

    render: function() {
        <div>
            <a href="#" onClick={this.toggle} />
        </div>
    }
});

I'm trying to call the showAlert from parent and based on the examples I've seen, this is how to do it but I can't make it work.

Community · Accepted Answer · 2017-05-23 12:00:41Z

2

you're using the wrong value for this inside of GridView.render. Either pass it explicitly to Array.map() (see the docs for how to do that) or assign this to some new variable at the very top of render() and reference that instead.

Here is a really, really great SO comment as to why this happens, as well as some other alternative workarounds if neither of the above work for you.

edited May 23, 2017 at 12:00

CommunityBot

11 silver badge

answered Oct 13, 2016 at 3:26

Dan O

6,0802 gold badges35 silver badges52 bronze badges

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

Comments

lorefnon · Accepted Answer · 2016-10-13 03:33:07Z

0

The context of the function passed to map in render method of GridBody is window and not the component. You can bind the interatee to get the behavior you want:

render: function() {
    var rows = this.props.rows.map(function(li) {
        return (
            <GridRow showAlert={this.showAlert} />
        );
    }.bind(this));

    return (
        <div>
            {rows}
        </div>
    );
}

answered Oct 13, 2016 at 3:33

lorefnon

13.1k8 gold badges66 silver badges97 bronze badges

Collectives™ on Stack Overflow

Can't call function in parent component from child component using React

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related