title: Arguments undefined after passing to React function?
body: <p>In the Home component we want to call a function:</p>
  
  <pre><code>     refreshMatchStatus = (match_id, status) =&gt; {
         console.log(match_id)
         var matches = this.state.matches
         matches.map(function(match){
           if (match.id == match_id){
             match.challenged = status
           }
         })
         this.setState({matches: matches})
       }
  </code></pre>
  
  <p>From the Home render this function is passed down to the next component:</p>
  
  <pre><code> &lt;List refreshMatchStatus={this.refreshMatchStatus.bind(this)} showAlert={this.props.showAlert} user={this.state.user} token={this.state.token} matches={this.state.matches}/&gt;
  </code></pre>
  
  <p>The function is then passed down through some components like this:</p>
  
  <pre><code>refreshMatchStatus={this.props.refreshMatchStatus} 
  </code></pre>
  
  <p>When it arrives in the ChallengePopup component it is executed like this:</p>
  
  <pre><code>this.props.refreshMatchStatus(match_id, status)
  </code></pre>
  
  <p>For some reason the arguments <code>match_id</code> and <code>status</code> are <code>undefined</code> when they are passed. </p>
  
  <p>If we do a <code>console.log</code> in the ChallengePopup component, one line before the function is called, the <code>match_id</code> will return the right id number. But when we do a <code>console.log</code> on the first line of the refreshMatchStatus function, the <code>match_id</code> returns <code>undefined</code>.</p>
  
  <p>We suspect this has something to do with the bind(this), but we cannot find any way to pass the arguments in the right way.</p>