title: Is it possible to have dynamic event handlers in React?
body: <p>I have been told that its a very very bad practice but I am curious to know if it is possible to have dynamic handlers in React.  Consider the code below. I would like to trigger appropriate handler based on <code>props</code> value.  That is, when edit button is clicked edit handler is invoked etc. This is not working right now complaining that <code>...expected function but string provided...</code></p>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  
  export default class HelloWorld extends React.Component{
      render() {
          return(
          &lt;div&gt;
              &lt;h4&gt;Hello World&lt;/h4&gt;
              &lt;MyButton txt="edit" /&gt;
              &lt;MyButton txt="insert" /&gt;
          &lt;/div&gt;
          );
      }
  };
  
  export default class MyButton extends React.Component{
      edit() {
          console.log('edit button clicked');
      }
      insert() {
          console.log('insert button clicked');
      }
      render(){
          return (
              //Trigger handler based on this.props.txt
              &lt;button onClick={this.props.txt}&gt;{this.props.txt}&lt;/button&gt;
          )
      }
  }
  ReactDOM.render(&lt;HelloWorld/&gt;, document.getElementById('hello'));
  </code></pre>