Can we pass event name as props in react?

Question

Hi I am new to react and I am trying to create a component where we can pass event name(onclick, onChange etc.) as props. So the component can be customize in an event way as well. Is it possible?

<Input  {this.props.eventName} = {this.props.name} />

This I want to do. Is it possible?

Answer 1

Do you want to achieve something similar to this -

One problem is that you must pass only supported events to the element type. e.g in case of button onClick and other events supported by button.

class Parent extends React.Component {
  
  render() {
    return(
       <ChildComponent
        evtName = 'onClick' 
        evtHandler={ () => { console.log("event called!");}}
       />
    )
  }
}

class ChildComponent extends React.Component {
  render() {
     return React.createElement(
        'button',
        { [this.props.evtName] : this.props.evtHandler },
        'Click me'
      );  }
}


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

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>


<div id="root"></div>