React: Passing Functions to Components

On yesterday's Technical Assessment, I was a little thrown off by a click handler that was set-up for us.

Most of my click handling has looked like this in our projects (code is condensed for brevity):

clickHandler(event){
//do something with:
event.target.value
}

<button value = {this.state.something} onclick = {this.clickhandler} </button

Even when the custom click handling functions are passed down as props, they're frequently reading event objects for values and then doing something with those values. Less frequently, but not uncommonly, I've passed in a prop or a state value.

Well on the TA we got something different. We got a arrow function passed in to our click handler. Now I get returning functions. But I was tripped up because well, sometimes a novel situation in a high-stakes situation can be trippy, but also because it's not clear to me what doing it that way provides.

Here's an example from the React docs:

<button onClick={() => this.handleClick(id)} />

So on the click, the anonymous function '()' is run and it returns the called handleClick(id).

I wrote up some examples (building on examples I found here) to break down my mis-understanding and think that I've gained clarity on how and why it's used.

Here's my conclusion:

Essentially, 'id' is passed into the function here when it's not available to the click handler on a prop or as state.

Check out this comparison of passing in a value to the clickhandler function vs accessing that same value from state:

this.state = {thing: x}

handleclick(){
//do something with:
this.state.thing
}

render/return
  onclick = {this.handleclick}

vs:

this.state = {thing: x}

handleclick(data){
//do something with:
data (aka this.state.thing)
}

render/return
  onclick = {()=>this.handleclick({this.state.thing})

And then my epiphany came when I considered iterating to produce html elements and how those individual iterated items can be passed in, and not only things like state/props:

someArray.map(thing => (
  onclick = {()=> this.handleclick(thing)
))

I mentioned getting thrown off by all of this. But I did manage to get done what I needed. What I did was modify the provided code to conform to my event-handling preference/experience.

Here's what it looked like:

handleClick(event) {
  //do something with:
  event.target.dataset.Thing
  }

  render() {
      data-Thing={this.state.Thing} onClick={this.handleClick}

//I think there was a map in there, which means that I could've used the pattern in the previous code block (indeed, the pattern that was provided to us).

Thats' one of my favorite things about coding: finding ways to make things work. And also the learning and applying those lessons to the next challenge.

Finally, I'll add this note to clarify on the whole returning a function thing:

the whole point of ()=> {} is that the handleclick(thing) is not called right away. it's only called on click.
onclick = {this.handleclick(thing)}
this would get called on render (it's a function call vs the other which is a function definition).

So that's a little bit on event handling and passing in functions. I think a post on conditional rendering would also be useful.