title: Why my React component handler is executed at render time and will not work afterwhile?
body: <p>My App component:</p>
  
  <pre><code>  import React, { Component } from 'react';
    import Library from './Library'
  
    class App extends Component {
  
      state = {
        library: storeGet() || {},
        lib_img_selected : null
      };
  
      selectedLibImgHandler = (url) =&gt; {
        console.log('url', url)
      };
  
  
      render() {
        return (
          &lt;div className="container"&gt;
            &lt;div className="row"&gt;
              &lt;Library  mylibrary={this.state.library} onSelectedImage={this.selectedLibImgHandler} /&gt;
            &lt;/div&gt;
          &lt;/div&gt;
  
        );
      }
    }
  
    export default App;
  </code></pre>
  
  <p>I have this component Library :</p>
  
  <pre><code>import React, { Component } from 'react';
    import Card from './Card'
  
    class Library extends Component {
        imageSelected = (udsUrl) =&gt;{
          console.log('clicked')
  
        }
          getPreviews = () =&gt; {
          // console.log('this.props.library', this.props.mylibrary)
          var self = this;
          var cards = Object.keys(this.props.mylibrary).map(function (key, index) {
            let x = self.props.mylibrary[key];
            let card = {}
            card.uid = x.id
            card.title = x.customImageName || 'Img ' + index
            card.src = 'http://myurl';
            card.url = 'http://....'
  
            return card
          });
          return cards;
        }
        render() {
  
          return (
            &lt;div className="row"&gt;
              &lt;div className="jumbotron" &gt;
                &lt;h1&gt;Library&lt;/h1&gt;
                {this.getPreviews().map(card =&gt; &lt;Card key={card.uid} {...card} onClick={this.imageSelected(card.url) }/&gt;)}
  
  
              &lt;/div&gt;
            &lt;/div&gt;
          )
        }
  
    }
  
    export default Library;
  </code></pre>
  
  <p>Card is something like this:</p>
  
  <pre><code>import React  from 'react';
  const Card = (props) =&gt; {
      return (
          &lt;div className='card-box'&gt;
              &lt;div className='card-image'&gt;
                  &lt;img src={props.src} alt="" className={props.orientation} /&gt;
              &lt;/div&gt;
              &lt;div&gt;{props.title}&lt;/div&gt;
          &lt;/div&gt;
      );
  };
  export default Card;
  </code></pre>
  
  <p>I don't get why </p>
  
  <pre><code> onClick={this.imageSelected(card.url)
  </code></pre>
  
  <p>is being fired for every Card component rendered  and then when I click on a Card nothing happens..</p>
  
  <p>I think I'm missing some core concept about rendering and function bindings with React... </p>