React - Child onClick event doesn't trigger when binding parameters
<p>My problem is the following. </p>

<ul>
<li>I have a "BookShelf" component which contains a "Book" list. </li>
<li>The parent (bookshelf) manage in its state a "selectedBook" property.</li>
<li>When clicking on one child (book), <em>I would like</em> to update its parent <em>selectedBook</em> property.</li>
<li>To achieve this, I use a function defined in the parent properties.</li>
<li><strong>But this method is never trigerred</strong> (I tried with a console.log('something') but it never shows.</li>
</ul>

<p>See my code below :</p>

<pre><code>setSelectedBook(index) {
    this.setState({
        selectedBook: index
    })
},
getInitialState() {
    return {
        books: [],
        selectedBook: null
    }
},
componentDidMount() {
    let component = this
    $.ajax({
        url: 'data/books.json',
        success (data) {
            component.setState({
                books: data
            })
        },
        error (err) {
            console.log(err)
        }
    })
},
render() {
    let component = this
    var bookList = this.state.books.map(function(book, index) {
        let selectBook = component.setSelectedBook.bind(component, index)
        return (
             &lt;Book onClick={selectBook} data={book} key={index} /&gt;
         )
    })
    return &lt;div className="book-shelf"&gt;
        {bookList}
    &lt;/div&gt;
}
</code></pre>

<p>Thanks in advance !</p>