Skip to content

Instantly share code, notes, and snippets.

@K3TH3R
Created July 25, 2015 23:26
Show Gist options
  • Save K3TH3R/c833be852203c4922614 to your computer and use it in GitHub Desktop.
Save K3TH3R/c833be852203c4922614 to your computer and use it in GitHub Desktop.
Using arrow functions to easily bind functions for use inside of React Components
// This is how you might traditionally bind component
// functions to make sure you're accessing the right scope
class OldButton extends React.Component {
handleClick (e){ /* ... */ }
render() {
return <button onClick={this.handleClick.bind(this)} />;
}
}
// However, with the new ES6 arrow functions, you can do
// something like this which is basically the same, but
// actually is more efficient and easier to read
class NewButton extends React.Component {
handleClick = (e) => { /* ... */ }
render() {
return <button onClick={this.handleClick} />;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment