React - Child onClick event doesn't trigger when binding parameters

Question

My problem is the following.

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

See my code below :

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 (
             <Book onClick={selectBook} data={book} key={index} />
         )
    })
    return <div className="book-shelf">
        {bookList}
    </div>
}

Thanks in advance !

How your Book component triggers onClick? You need to trigger props.onClick() explicitly in Book component — Maxx
– Maxx, Commented Aug 4, 2016 at 14:44
I may have missed something. The onClick isn't triggered only by adding it in the book declararation ? — imrok
– imrok, Commented Aug 4, 2016 at 14:48
@OhmWang onClick is just property on your custom component, react doesn't know what to do with it. — Maxx
– Maxx, Commented Aug 4, 2016 at 14:50

The Reason · Accepted Answer · 2018-04-26 07:38:31Z

Here is a simple example for you. Also fiddle

You should pass your onClick event as a props to child component, once child component gets it, it will call a callback and pass an id as an agrument to the callback (like i have below).

class Book extends React.Component {
    constructor(props){
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick(){
    this.props.click(this.props.id)
  }
    render(){
    return  <li onClick={this.handleClick}>{this.props.id} - {this.props.name}</li>
  }
}

class BookShelf extends React.Component{
    constructor(){
    super();
    this.onClick = this.onClick.bind(this)
  }
  onClick(id){
    console.log(id)
  }
  render(){
    return <ul> // of course you may use Array.map functions, it's just for example
      <Book click={this.onClick} id={1} name={'hello'}/>
      <Book click={this.onClick} id={2} name={'world'}/>
    </ul>
  }
}

React.render(<BookShelf />, document.getElementById('container'));

Also i suggest look at this article Communicate Between Components, it will be useful for you.

Thanks

tsb · Accepted Answer · 2020-09-21 13:35:53Z

1

select method return anonymous function as value.

<Book onClick={this.selectBook(index)} data={book} key={index} />

 selectBook (index){
       return ((() => {
            console.log(" selectBook fired" );
            component.setState({selectedBook:index}); 
              }).bind(component,index))
      
  }

edited Sep 21, 2020 at 13:35

answered Aug 4, 2016 at 15:13

tsb

1891 silver badge9 bronze badges

Collectives™ on Stack Overflow

React - Child onClick event doesn't trigger when binding parameters

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related