Inline event handlers

The typical approach to assigning handler functions to JSX properties is to use a named function. However, sometimes we might want to use an inline function. This is done by assigning an arrow function directly to the event property in the JSX markup:

import React, { Component } from 'react'; 
 
export default class MyButton extends Component { 
 
  // Renders a button element with an "onClick()" handler. 
  // This function is declared inline with the JSX, and is 
  // useful in scenarios where you need to call another 
  // function. 
  render() { 
    return ( 
      <button 
        onClick={e => console.log('clicked', e)} 
      > 
        {this.props.children} 
      </button> 
    ); 
  } 
} 

The main use of inlining event handlers like this is when you have a static parameter value that you want to pass to another function. In this example, we're calling console.log() with the clicked string. We could have set up a special function for this purpose outside of the JSX markup by creating a new function using bind(). But then we would have to think of yet another name for yet another function. Inlining is just easier.