ReactJS: Events in .map(array) not fired

Question

In my render function I want to display a list based on an array, while displaying it works fine, it seems that whatever event I bind to it is being ignored.

render: function() {
  var language = function(language) {
    return (
      <li><label>
        <input type="checkbox" value={language} onChange={this.onLanguageChange} /> 
        {language} ({_languages_total[language]})
      </label></li>
    )
  }

  return (
    <ul className="filter__list">
      <li><label>
        <input type="checkbox" value="0" onChange={this.onLanguageChange} />
        0 (2)
      </label></li>
      {this.state.languages.map(language)}
    </ul>
  )
}

I rendered one list item directly outside the .map to see if it would give any results, and this seems to be the only one that's working.

Am I just missing something obvious, or are events ignored when placed outside the return()?

Sophie Alpert · Accepted Answer · 2014-01-24 18:31:38Z

4

Your problem is that the this.onLanguageChange doesn't refer to the right handler because this within the language function is unbound and so when it's executed points to the global object (i.e., window). You can do a few things to fix it:

Add var self = this; before defining language and refer to self.onLanguageChange.
Add .bind(this) after the function that you're assigning to render.
Call .map(language, this) to tell map what context to use when calling language. This is the simplest and cleanest solution.

If you're not familiar with JavaScript's scoping rules and how this works, I suggest reading up on it.

answered Jan 24, 2014 at 18:31

Sophie Alpert

144k37 gold badges229 silver badges244 bronze badges

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

1 Comment

woutr_be Over a year ago

Ah, I totally overlooked that, I actually had a similar issue before, but somehow I didn't spot it in this context. Thanks!

CdSpeis · Accepted Answer · 2014-05-05 00:57:05Z

3

There is a really useful example in the reactjs docs http://facebook.github.io/react/tips/communicate-between-components.html

They basically do something like this..

return (
  {this.state.languages.map(function(langauge, i){
   return (
     <li><label>
        <input type="checkbox" value={language} onChange={this.onLanguageChange.bind(this, i)} /> 
        {language} ({_languages_total[language]})
      </label></li>
   )
  }, this)
 }
)

answered May 5, 2014 at 0:57

CdSpeis

312 bronze badges

Collectives™ on Stack Overflow

ReactJS: Events in .map(array) not fired

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related