Passing Functions to Components How do I pass an event handler (like onClick) to a component? Pass event handlers and other functions as props to child components: If you need to have access to the parent component in the handler, you also need to bind the function to the component instance (see below). How do I bind a function to a component instance? There are several ways to make sure functions have access to component attributes like this.props and this.state, depending on which syntax and build steps you are using. Bind in Constructor (ES2015) class Foo extends Component { constructor(props) { super(props); this.handleClick = this.handleClick.bind(this); } handleClick() { console.log('Click happened'); } render() { return Click Me; } } Class Properties (ES2022) class Foo extends Component { handleClick = () => { console.log('Click happened'); }; render() { return Click Me; } } Bind in Render class Foo extends Component { handleClick() { console.log('Click happened'); } render() { return Click Me; } } Note: Using Function.prototype.bind in render creates a new function each time the component renders, which may have performance implications (see below). Arrow Function in Render class Foo extends Component { handleClick() { console.log('Click happened'); } render() { return