Reactjs - Need to bind a onClick handler twice?

Question

Coming from Vue.js (two way data flow) I have question about react one way data flow - I have a Parent that have a handler for its child onClick:

<div className="recipe-container">
                <button onClick={this.toggleRecipeList.bind(this)}>Show Recipes</button>
                <RecipeList showRecipe={this.showRecipe} list={this.state.recipes} />
            </div>

So, I pass showRecipe handler, which has only one parameter (and simply just logs it to the console).

My RecipeList looks like this (stateless func):

return (<ul className='recipe-list-bottom'>
        {
            props.list.map((rec, key) => {
                return <li onClick={props.showRecipe(rec)} key={key}>{rec.title}</li>
            })
        }

    </ul>)

I tried to launch showRecipe(rec) to have the current rec object as argument. Although I recive what I want, the handler is being fired from a button which is a sibling of RecipeList.

I manage to get it working by adding onClick={props.showRecipe.bind(null,rec)} to li element, but I find it really dirty way to do so.

Am I missing something? I thought showRecipe(rec) would be enough to get what I wanted. Why showRecipe(rec) is being fired with this set to button?

Pablo Lozano · Accepted Answer · 2017-02-07 15:56:33Z

2

I think that your second snippet has a classic error:

return (<ul className='recipe-list-bottom'>
        {
            props.list.map((rec, key) => {
                return <li onClick={props.showRecipe(rec)/*here*/} key={key}>{rec.title}</li>
            })
        }

    </ul>)

You are assigning the result of calling showRecipe to the onClick parameter, not the function itself. The bind solutions works, but if you want to pass the parameter rec without using bind you need to wrap the call:

return (<ul className='recipe-list-bottom'>
        {
            props.list.map((rec, key) => {
                return <li onClick={()=>props.showRecipe(rec)} key={key}>{rec.title}</li>
            })
        }

    </ul>)

edited Feb 7, 2017 at 15:56

answered Feb 7, 2017 at 14:09

Pablo Lozano

10.4k2 gold badges43 silver badges64 bronze badges

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

1 Comment

Krzysztof Borowy Over a year ago

Yeah, it does work! Silly me, idk why I thought it will be fired with that parameter :D. Thanks! Beginner's mistake.

corvid · Accepted Answer · 2018-06-11 13:21:05Z

1

You can use es2015 stage-0 syntax in order to write it like this:

class Blah extends Component {
  onClick = (recipe) => e => this.props.showRecipe(recipe);

  render() { 
    return (
      <ul className='recipe-list-bottom'>
        {
            props.list.map((rec, key) => {
                return <li onClick={onClick(rec)} key={key}>{rec.title}</li>
            })
        }

      </ul>
    )
  }
}

edited Jun 11, 2018 at 13:21

answered Feb 7, 2017 at 14:04

corvid

11.3k12 gold badges71 silver badges135 bronze badges

Collectives™ on Stack Overflow

Reactjs - Need to bind a onClick handler twice?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related