How to use onClick to fire two functions reactJs

Question

Fairly new to React Js so bear with me...

I'm using onClick in a child component to change the state of a parent component. The parent state is a boolean which, in turn is used to toggle a class on and off on a seperate element from that which was clicked. Something like this:

In Parent.js (relevant code only):

constructor(props) {
    super(props);

    this.state = {
        elementOpen: false;
    }

    this.handleClick = this.handleClick.bind(this);
}

handleClick() {
    this.setState({
        elementOpen: !this.state.bucketListOpen
    })
}

render() {
     return (
         <Child 
             className = {this.state.elementOpen ? "open" : "closed"}
             toggleClassName = {this.handleClick}
         />
     )
}

In Child.js (relevant code only):

render() {
     return (
         <div>
             <div className={this.props.className}>Test</div>
             <a onClick={this.props.toggleClassName}>Click Me</a>
         </div>
     )
}

... and this works fine. No problems. The problem arises when I want to move the {this.props.toggleClassName} in the Child component into a handling function (the reason is so that I can fire more than one event on click). In short, it ceases to work.

I've tried creating a method in the Child component and placing the prop inside the method as follows:

handleClassSwitch() {
    return this.props.toggleClassName;
}  

render() {
    return (
         <div>
             <div className={this.props.className}>Test</div>
             <a onClick={this.handleClassSwitch}>Click Me</a>
         </div>
    )
}

...but sadly it's not working and I'm stumped. Probably really obvious but I'm struggling here. Any help appreciated.

Mayank Shukla · Accepted Answer · 2018-07-05 18:26:20Z

1

You can call multiple functions inside handleClassSwitch, but you need to call those methods by using ().

Like this:

handleClassSwitch() {
   this.props.toggleClassName();    // notice ()
   function2();
   function3();
}

Note: Don't forgot to bind handleClassSwitch method inside Child component, either bind inside constructor or use arrow function.

Check this snippet for the difference between these two:

function abc() {
  console.log('calling abc');
  return 1;
}

console.log('without () => ', abc);
console.log('with () => ', abc());

answered Jul 5, 2018 at 18:26

Mayank Shukla

105k19 gold badges163 silver badges146 bronze badges

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

1 Comment

Stef Over a year ago

Lovely - issue was the () at the end of the function call (doh!) - thanks ;-)

aherriot · Accepted Answer · 2018-07-05 18:27:34Z

1

It seems that you don't actually invoke toggleClassName anymore. When you click the a tag, it calls handleClassSwitch which returns a reference to toggleClassName instead of invoking it. Try writing this instead:

handleClassSwitch = () => {
   this.props.toggleClassName();
}

Notice that I use the => syntax to bind the handleClassSwitch so it has access to this

answered Jul 5, 2018 at 18:27

aherriot

4,7356 gold badges27 silver badges36 bronze badges

Comments

Tholle · Accepted Answer · 2018-07-05 18:31:27Z

1

You are currently not binding your handleClassSwitch function the same way you do with handleClick in your Parent component.

It will work if you bind it in the Child component as well. You could also make handleClassSwitch into an arrow function if your would prefer.

class Child {
  handleClassSwitch = () => {
    this.props.toggleClassName();
  };

  render() {
    return (
      <div>
        <div className={this.props.className}>Test</div>
        <a onClick={this.handleClassSwitch}>Click Me</a>
      </div>
    );
  }
}

edited Jul 5, 2018 at 18:31

answered Jul 5, 2018 at 18:26

Tholle

113k22 gold badges209 silver badges198 bronze badges

2 Comments

Stef Over a year ago

Thanks - I has actually bound it but didn;t put it in the code in the question - my mistake.

Tholle Over a year ago

@Stef Ah, alright. Then it's probably just a matter of calling toggleClassName in handleClassSwitch: this.props.toggleClassName();

Collectives™ on Stack Overflow

How to use onClick to fire two functions reactJs

In Parent.js (relevant code only):

In Child.js (relevant code only):

3 Answers 3

1 Comment

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

In Parent.js (relevant code only):

In Child.js (relevant code only):

3 Answers 3

1 Comment

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related