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?

I want to send the event name from parent component so the component can use the passed event. Suppose I send eventName = onClick. When I use the same component different place So want onChnage event. So simply I can pass eventName = onChange. — suyesh, May 22 '17 at 05:50
Why not just do `onClick={...}` and `onChange={...}`? Or spread the props to the child component: `{...this.props}`? — Andrew Li, May 22 '17 at 05:51
Possible duplicate of [React: How to listen to child component events](http://stackoverflow.com/questions/28887570/react-how-to-listen-to-child-component-events) — Mayank Shukla, May 22 '17 at 06:29
Possible duplicate of http://stackoverflow.com/questions/22639534/pass-props-to-parent-component-in-react-js — Mayank Shukla, May 22 '17 at 06:36

WitVault · Accepted Answer · 2017-05-22T07:22:18.743

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>

That's the way to do it, but it doesn't make sense. Does it? — loelsonk, May 22 '17 at 07:22
@loelsonk you are right. But this is what OP wants. This is just a hacky way to do it. — WitVault, May 22 '17 at 07:24

loelsonk · Answer 2 · 2017-05-22T07:22:46.833

Here is example how to pass an event from parent Component to Child - by having result in Parent Component.

class Parent extends Component {
  //constructor, other methods, etc...

  // We call our event update
  update(stuff) {
    console.log(stuff);
  }
}

We pass in ParentComponent's render method a ChildComponent with props onClick(you can name it whatever you want).

<ChildComponent
  onClick={this.update.bind(this)}
/>

Now, ChildComponent. To access our props onClick, we just use this.props.onClick. Our argument is just hello, you can pass as many arguments you want.

<button onClick={ (e) => this.props.onClick('hello') }>
  Action
</button>

Here is working example:

class Parent extends React.Component {
  
  update(stuff) {
    console.log(e, stuff);
  }
  
  render() {
    return(
       <ChildComponent
        onClick={this.update.bind(this)} />
    )
  }
}

class ChildComponent extends React.Component {

  render() {
    return(
      <div>
      <button onClick={ (e) => this.props.onClick('hello') }> Action</button>
      </div> 
    )
  }
}


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>

Here you are passing the method that has to be called on onClick event. Thats fine however I want to make event dynamic. Like here if you want to change event to onChange means you have to change in the child component. But I dont want to do that I just want to pass it as props. Hope I made my point. — suyesh, May 22 '17 at 06:16
Ok I get your point. In my opinion it is not possible, because how you would know what prop name you should call inside `ChildComponent`, you can pass it as another prop, but you still need to have some hardcoded information.I think you ran into classic [XY problem](https://meta.stackexchange.com/questions/66377/what-is-the-xy-problem). You should do it as simple as you can, it will be easier to maintain later on. — loelsonk, May 22 '17 at 07:16

score 0 · Answer 3 · answered May 22 '17 at 07:06

If I understand you correctly, just pass the event and it's handler as props. I didn't see the use case just considering the event name.

See the below example of reusing the same element with different events.

class Input extends React.Component {
  render(){
    const {} = this.props;
    return (
      <input {...this.props} />
    );
  }
}

class Test extends React.Component {
  render(){
    return (
      <div>
        <Input name="onClick" onClick={(e) => console.log(e.target.name)}/>
        <Input name="onChange" onChange={(e) => console.log(e.target.name)}/>
      </div>
    );
  }
}

ReactDOM.render(<Test />, 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>

Can we pass event name as props in react?

3 Answers3