Get the object clicked from the child component in React

Question

I'd like to trigger the function handleDisplayProduct on click and pass to it the object clicked. So far it calls the function handleDisplayProduct when the list is generated for all the objects but the function is not triggered on the click event. So how do i bind the event onclick with the Container and passing to it the element clicked?

Container

// Method to retrieve state from Stores
function getAllProductState(){
 return {
  products: ProductStore.getProducts(),
 };
}

export default class ProductAllContainer extends Component {
 constructor(props){
  super(props);
 this.state = getAllProductState();
}

handleDisplayProduct(data){
 console.log(data);
 // ProductActions.selectProduct(data)
}

render(){
 const products = this.state.products;
 return(
  <div>
    { products.map(function(product,i){
      return  (
        <ProductThumbnail
          product = { product }
          key = { i }
          **onDisplayProduct = { this.handleDisplayProduct(product) }**
        />
      )
    },this)}
  </div>
  )
 }
}

View

const ProductThumbnail = (props)=>{

 return(
  <div>
   <LinksTo to="/" **onClick={props.onDisplayProduct}**>
     <h1>{props.product.headline}</h1>
     <img src={props.product.images[0].imagesUrls.entry[1].url} alt="Thumbnail small pic"/>
   </LinksTo>
  </div>
 )
}

Answer 1

You need to bind the event listener to the react class. You can do it this way.

constructor(props){
  super(props);
  this.state = getAllProductState();
  this.handleDisplayProduct = this.handleDisplayProduct.bind(this);
}

or alternatively using es6, you can use an arrow function instead.

handleDisplayProduct = (data) => {
 console.log(data);
 // ProductActions.selectProduct(data)
}

Note: Class properties are not yet part of current JavaScript standard. So the second example wouldn't work unless you add a babel-plugin-transform-class-properties babel plugin

Edit: Also @ryanjduffy pointed out a crucial mistake in your code. Refer his comment.