How to call multiple functions on the same onClick event ReactJS

Question

I have this function and when I click on the <li> tag, I want to call two functions, onClick={handleProjectSelection(project)} a handler function that comes from props from the parent component, and also this function onClick={() => this.setState({ showingProjectSelector: false })}

  renderDropdown () {
    const { displayDropdown, projects, handleProjectSelection } = this.props
    if (this.state.showingProjectSelector && displayDropdown) {
      const projectsList = projects.map((project) => (
        <li className='u-cursor--pointer u-font-size--12px'
          key={project.get('id')}
          onClick={handleProjectSelection(project)} >
          <i className='fa fa-square u-font-size--10px' style={{color: project.get('color')}}></i>
          {project.get('name')}
        </li>
      ))

How can I call this two functions? This is the handler function from the parent component

  handleProjectSelection = (project) => () => {
    this.setState({
      projectToAdd: project.get('id'),
      projectToAddColor: project.get('color'),
      projectToAddName: project.get('name') === 'default' ? 'No' : project.get('name').substring(0, 2)
    })
  }

Mayank Shukla · Accepted Answer · 2018-02-19 16:45:25Z

12

Write it like this:

onClick={() => {
   handleProjectSelection(project);
   anotherfunctionCall();
}}

Or create a single function, use that as a click handler. Inside that function call other two functions, Like this:

onClick={this.handleClick}

handleClick(){
   function1();
   function2();
}

See there are two ways of using arrow function:

1- Concise Body: () => /*single expression*/

2- Block Body: () => {}

In block body inside {} (body of the function), we can perform any number of task.

Like this:

onClick={() => {
   fun1();
   fun2();
   fun3();
   fun4();
   ....
   funN();
}}

edited Feb 19, 2018 at 16:45

answered Feb 19, 2018 at 16:38

Mayank Shukla

105k19 gold badges163 silver badges146 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Lizz Parody Over a year ago

I did what you said in the first example and it worked! onClick={() => { handleProjectSelection(project); this.setState({ showingProjectSelector: !this.state.showingProjectSelector }) }} But I tried to get it out in a different function like this: handleClick (project) { const { handleProjectSelection } = this.props handleProjectSelection(project) this.setState({ showingProjectSelector: !this.state.showingProjectSelector }) } but It didn't work. Do you know why?

Mayank Shukla Over a year ago

because you forgot to bind the handleClick method, put this line in the constructor: this.handleClick = this.handleClick.bind(this), otherwise this keyword will not point to class instance :)

Patrik Rikama-Hinnenberg Over a year ago

Let's say this onClick is in a child component could I pass a prop as one of those five functions instead?

Mayank Shukla Over a year ago

didn't get you properly, can you please explain more or show your code?

RRR uzumaki Over a year ago

what if first one is asynchronous ..i want the second one to be executed only after the first one gets successfully completed

|

Amanshu Kataria · Accepted Answer · 2018-02-19 17:01:46Z

2

You can do it in two ways:
1.

onClick={()=>{
    callFunctionOne();
    callFunctionTwo();
}}

2.

callTwoFunctions(){
    callFunctionOne();
    callFunctionTwo();
}

onClick={this.callTwoFunctions}

answered Feb 19, 2018 at 17:01

Amanshu Kataria

3,4467 gold badges28 silver badges39 bronze badges

Comments

Léo R. · Accepted Answer · 2018-02-19 16:39:28Z

1

You can Wrap your two+ function calls in another function/method. For example

var Test = React.createClass({
   onClick: function(event){
      func1();
      func2();
   },
   render: function(){
      return (
         <a href="#" onClick={this.onClick}>Test Link</a>
      );
   }
});

answered Feb 19, 2018 at 16:39

Léo R.

2,7161 gold badge13 silver badges23 bronze badges

2 Comments

RRR uzumaki Over a year ago

what if first one is asynchronous ..i want the second one to be executed only after the first one gets successfully completed

Sandip Subedi Over a year ago

you can use async-await

Collectives™ on Stack Overflow

How to call multiple functions on the same onClick event ReactJS

3 Answers 3

8 Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

8 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related