title: Why is my onClick being called on render? - React.js
body: <p>I have a component that I have created:</p>
  
  <pre><code>class Create extends Component {
    constructor(props) {
      super(props);
    }
  
    render() {
      var playlistDOM = this.renderPlaylists(this.props.playlists);
      return (
        &lt;div&gt;
          {playlistDOM}
        &lt;/div&gt;
      )
    }
  
    activatePlaylist(playlistId) {
      debugger;
    }
  
    renderPlaylists(playlists) {
      return playlists.map(playlist =&gt; {
        return &lt;div key={playlist.playlist_id} onClick={this.activatePlaylist(playlist.playlist_id)}&gt;{playlist.playlist_name}&lt;/div&gt;
      });
    }
  }
  
  function mapStateToProps(state) {
    return {
      playlists: state.playlists
    }
  }
  
  export default connect(mapStateToProps)(Create);
  </code></pre>
  
  <p>When I <code>render</code> this page, <code>activatePlaylist</code> is called for each <code>playlist</code> in my <code>map</code>.  If I <code>bind</code> <code>activatePlaylist</code> like:</p>
  
  <pre><code>activatePlaylist.bind(this, playlist.playlist_id)
  </code></pre>
  
  <p>I can also use an anonymous function:</p>
  
  <pre><code>onClick={() =&gt; this.activatePlaylist(playlist.playlist_id)}
  </code></pre>
  
  <p>then it works as expected.  Why does this happen?</p>