jfdev90 jfdev90 - 1 month ago 7
Javascript Question

Access a parent component's method onClick in React

So as the title suggests I'm just trying to access a parent component's method in React via a child component. I understand this can be accomplished via props, however I'm attempting to do it via an onClick event and it doesn't seem to like that. Here is a basic example of my problem.

var Child = React.createClass({

render: function() {
return (

<button onClick={this.onClick}>Click Here</button>
);
}
});


var Parent = React.createClass({

onClick: function() {
console.log('I've been clicked');
},


render: function() {
return (

<Child />

);
}
});

ReactDOM.render(<Parent />, document.getElementById('Parent'));


How do I get the Child component's button onClick event to fire the Parent component's onClick method? Appreciate the help.

Answer

You can pass Parent's onClick function to Child as a prop:

<Child myClick={this.onClick} />

and then use it in Child:

<button onClick={this.props.myClick}>Click Here</button>

Entire code:

var Child = React.createClass({
    render: function() {
        return (<button onClick={this.props.myClick}>Click Here</button>)
    }
});

var Parent = React.createClass({
    onClick: function() {
        console.log("I've been clicked");
    },

    render: function() {
        return (<Child myClick={this.onClick} />);
    }
});

ReactDOM.render(<Parent />, document.getElementById('container'));