0

When I needed to make a event handler I was doing it like

onClick={() => this.handleClick()}

I have since learned that this is not the best way to do it as the handler gets created each time.

I since learned you can do something like

handleClick = (e) => {
  console.log('Event', e);
}

what makes sense to me but it's when you need to pass some other pramaters that I get bit confused

handleClick = (param) => (e) => { 
  console.log('Event', e);
  console.log('Parameter', param);
}

I don't really get the 2 arrows I thought it would be like

handleClick = (param, event) => { 
  console.log('Event', e);
  console.log('Parameter', param);
}

Also what happens if I have more than 1 would it be

   handleClick = (param, param2, param3) => (e) => { 
      console.log('Event', e);
      console.log('Parameter', param);
    }
chobo2
  • 83,322
  • 195
  • 530
  • 832
  • 2
    Read about currying: https://stackoverflow.com/questions/36314/what-is-currying – Moritz Schmitz v. Hülst Sep 14 '18 at 19:22
  • Its a function that returns a function. When you do `onClick={this.handleClick(param1)}` it returns `onClick={(e) => { ... }}` but with your params in scope for the function to use – Brett Merrifield Sep 14 '18 at 20:15
  • As a note, if you curry the function it will also be created in every render. You need to use the function reference and find a way to get the parameters there. – devserkan Sep 14 '18 at 22:52

0 Answers0