Unable to call parent component function from child component in React

0
votes

I am new to react(started this week). I have a parent and child components and I want to call a parent method in the child component. I have searched through stackoverflow and my code is same as all the solutions I got.

I have a parent component ProductDisplay which displays a list of products:

import React, { Component } from 'react';
import data from '../data'
import Product from '../Product/product.component'

class ProductDisplay extends Component {

    constructor(props) {
        super(props)
        this.state = {
            pdts: data,
        }
    }

    addToCart = () => {
        console.log('add to cart');
    }

    render() {
        return (            
                this.state.pdts.map(product => (
                <Product
                    key={product.id}
                    product={product}
                    addToCart={this.addToCart}
                />
            ))
        );
    }
}
export default ProductDisplay;

and the child component is Product which renders each product

import React, { Component } from 'react';
import { withRouter } from 'react-router-dom';
import "./product.css";
class Product extends Component {
    constructor(props) {
        super(props);
    }

    handleClick = () => {
        this.props.addToCart();
        console.log('click');
    }

    render() {
        const product = this.props.product;
        console.log(this.props.addToCart);
        return (
            <div className="product">
                <img className="image" src={product.imgPath} alt={product.name} />
                <p className="name">{product.name}</p>
                <p className="price">Price: ₹{product.price}</p>
                <p className="category">Category: {product.category}</p>
                <button className="add">Add To Cart <i className="fa fa-cart-plus" 
                        onClick={this.handleClick}></i></button>
            </div>
        );
    }
}
export default withRouter(Product);

I want to call a function addToCart of ProductDisplay from Product on click of the button but it is not working. The handleClick function of the child omponent itself is not getting called. Hence the parent function which is being called from handleClick is also not getting called.

I’m also not sure if what I am doing would work in binding the method to all the buttons. Please help

2
javascriptreactjs

2 Answers

3
votes

You've put the onClick listener on the <i> tag, not on the actual button, which is why its not triggering anything when you click the button.

Try this instead:

<button 
    className="add" 
    onClick={this.handleClick}
>
    Add To Cart <i className="fa fa-cart-plus"></i>
</button>
-1
votes

You need to bind the addCart method with "this" of the class. And as Chistopher's answer your onClick is on i and not on button.

Either while passing.

   <Product
       key={product.id}
       product={product}
       addToCart={this.addToCart}
   />

Or in state

this.addToCart = this.addToCart.bind(this);