g_b g_b - 1 month ago 7
React JSX Question

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

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.

Answer

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.