ReactJS: How does bind work in this case?

Question

I'm currently building an eCommerce website with an Add To Cart feature, I'm working within the Cart class. I'm using Redux -- the onDelete function is used for when there's a Delete button and I can remove a book from the current cart state by clicking it (calling onClick).

This is what I've been trying but it does not work and throws the error: "TypeError: Cannot read property 'onClick' of undefined".

You can see that I've passed this to the onClick function in the constructor so in the onClick property of the Button, I have simply passed the cartID into the onClick function:

Cart.js file

class Cart extends React.Component {
    constructor() {
        super();
        this.onClick = this.onDelete.bind(this);
    }

    onDelete(_id) {
    //
    }

    render() {
        // if more than 1 item in cart array, then render the cart
        // otherwise, render empty
        if(this.props.cart[0]) {
            return this.renderCart();
        } else {
            return this.renderEmpty();
        }       
    }

    renderEmpty() {
        return (<div>Empty Cart</div>)
    }

    renderCart() {
        
        const cartItemsList = this.props.cart.map(function(cartArr) {
            return (
                <Card key={cartArr._id}>
                    <Row>
                        <Col>
                            <h6>{cartArr.title}</h6>
                        </Col>
                        <Col>
                            <h6>USD {cartArr.price}</h6>
                        </Col>
                        <Col>
                            <h6>qty. goes here</h6>
                        </Col>
                        <Col>
                            <ButtonGroup style={{minWidth:'300px'}}>
                                <Button
                                    variant = "default"
                                    size    = "small">
                                    -
                                </Button>
                                <Button
                                    variant = "default"
                                    size    = "small">
                                    +
                                </Button>
                                <span>     </span>
                                <Button
                                    onClick = {this.onClick(cartArr._id)}
                                    variant = "danger"
                                    size    = "small">
                                    DELETE
                                </Button>
                            </ButtonGroup>
                        </Col>
                    </Row>
                </Card>
            )
        })

        return (
            <Card>
                {cartItemsList}
            </Card>
        )
    }
}

I know that a part of this is due to the nature of the this keyword that I am passing to the onClick function. It works fine when I follow a tutorial and add the this keyword at the end of the cartItemList:

class Cart extends React.Component {
    constructor() {
        super();
        this.onClick = this.onDelete.bind(this);
    }

    onDelete(_id) {
    //
    }

    render() {
        // if more than 1 item in cart array, then render the cart
        // otherwise, render empty
        if(this.props.cart[0]) {
            return this.renderCart();
        } else {
            return this.renderEmpty();
        }       
    }

    renderEmpty() {
        return (<div>Empty Cart</div>)
    }

    renderCart() {
        
        const cartItemsList = this.props.cart.map(function(cartArr) {
            return (
                <Card key={cartArr._id}>
                    <Row>
                        <Col>
                            <h6>{cartArr.title}</h6>
                        </Col>
                        <Col>
                            <h6>USD {cartArr.price}</h6>
                        </Col>
                        <Col>
                            <h6>qty. goes here</h6>
                        </Col>
                        <Col>
                            <ButtonGroup style={{minWidth:'300px'}}>
                                <Button
                                    variant = "default"
                                    size    = "small">
                                    -
                                </Button>
                                <Button
                                    variant = "default"
                                    size    = "small">
                                    +
                                </Button>
                                <span>     </span>
                                <Button
                                    onClick = {this.onClick(cartArr._id)}
                                    variant = "danger"
                                    size    = "small">
                                    DELETE
                                </Button>
                            </ButtonGroup>
                        </Col>
                    </Row>
                </Card>
            )
        })

        return (
            <Card>
                {cartItemsList}
            </Card>
        )
    }
}

Here is some further reading if you don't want to bind it https://stackoverflow.com/questions/45053622/how-to-avoid-bind-or-inline-arrow-functions-inside-render-method — ak85, Jun 30 '20 at 10:10

score 3 · Answer 1 · answered Jun 30 '20 at 10:11

3

 onClick = {this.onClick(cartArr._id)}

change this line to

 onClick = {() => this.onClick(cartArr._id)}

answered Jun 30 '20 at 10:11

Anh Tuan

1,113
5
12

score 2 · Accepted Answer · answered Jun 30 '20 at 10:14

With your syntax

onClick = {this.onClick(cartArr._id)}

the function gets called immediately, not on-click.

You'll need

onClick = {() => this.onClick(cartArr._id)}

instead.

Anyway, with modern ES there's no need to manually bind things; use arrow functions instead.

Here's how I'd write your component (if it had to be a class component, not a function component):

class Cart extends React.Component {
  // Arrow functions are automagically bound
  onDelete = (_id) => {
    const { cart } = this.props;
    const cartWithoutGivenId = cart.filter((item) => item._id !== _id);
    const cartAfterDelete = { books: cartWithoutGivenId };
    this.props.deleteFromCart(cartAfterDelete);
  };

  render() {
    const { cart } = this.props;
    if (!cart.length) {
      return <div>Empty Cart</div>;
    }

    const cartItemsList = cart.map((item) => (
      <Card key={item._id}>
        <Row>
          <Col>
            <h6>{item.title}</h6>
          </Col>
          <Col>
            <h6>USD {item.price}</h6>
          </Col>
          <Col>
            <h6>qty. goes here</h6>
          </Col>
          <Col>
            <ButtonGroup style={{ minWidth: "300px" }}>
              <Button variant="default" size="small">
                -
              </Button>
              <Button variant="default" size="small">
                +
              </Button>
              <Button
                onClick={() => this.onDelete(item._id)}
                variant="danger"
                size="small"
              >
                DELETE
              </Button>
            </ButtonGroup>
          </Col>
        </Row>
      </Card>
    ));

    return <Card>{cartItemsList}</Card>;
  }
}

edit

For completeness, here's a pair of function components for this:

const CartItem = ({ item, onDelete }) => (
  <Card>
    <Row>
      <Col>
        <h6>{item.title}</h6>
      </Col>
      <Col>
        <h6>USD {item.price}</h6>
      </Col>
      <Col>
        <h6>qty. goes here</h6>
      </Col>
      <Col>
        <ButtonGroup style={{ minWidth: "300px" }}>
          <Button variant="default" size="small">
            -
          </Button>
          <Button variant="default" size="small">
            +
          </Button>
          <Button
            onClick={() => onDelete(item._id)}
            variant="danger"
            size="small"
          >
            DELETE
          </Button>
        </ButtonGroup>
      </Col>
    </Row>
  </Card>
);

const Cart = ({ cart, deleteFromCart }) => {
  const onDelete = React.useCallback(
    (_id) => {
      const cartWithoutGivenId = cart.filter((item) => item._id !== _id);
      const cartAfterDelete = { books: cartWithoutGivenId };
      deleteFromCart(cartAfterDelete);
    },
    [cart],
  );

  if (!cart.length) {
    return <div>Empty Cart</div>;
  }

  return (
    <Card>
      {cart.map((item) => (
        <CartItem key={item._id} item={item} onDelete={onDelete} />
      ))}
    </Card>
  );
};

score 1 · Answer 3 · answered Jun 30 '20 at 10:16

You should use currying.

When you write this.onClick(cartArr._id) it evaluates to undefined but it expects to get a callback function. So you need to return a function from onDelete, like this:

onDelete(id) {
    return function() {
         //On delete logic
    }
}

By the way, you can avoid binding the callback by using class properties and arrow functions(https://medium.com/quick-code/react-quick-tip-use-class-properties-and-arrow-functions-to-avoid-binding-this-to-methods-29628aca2e25)

Hope that helps, good luck!

Bartek Fryzowicz · Answer 4 · 2020-06-30T12:52:50.337

1

In addition to other answers I'd like to add explanation why your code throws "TypeError: Cannot read property 'onClick' of undefined". error.

You define map callback as regular function (not an arrow function) and according to map docs:

If a thisArg parameter is provided, it will be used as callback's this value. Otherwise, the value undefined will be used as its this value.

So this inside your map callback is undefined, that's why you get an error. Although onClick function is correctly 'binded' you can't access this function because this inside map callback doesn't point to component instance. To fix it you can use an arrow function as map callback instead of regular function (because inside arrow function this value of the enclosing lexical scope is used).

edited Jun 30 '20 at 12:52

answered Jun 30 '20 at 10:24

Bartek Fryzowicz

6,464
18
27

Thank you so much for the explanation! Cleared a lot of things up :) – PandasHelp Jul 02 '20 at 11:09
@PandasHelp You're welcome ;) Just please upvote my answer ;) – Bartek Fryzowicz Jul 02 '20 at 17:10

ReactJS: How does bind work in this case?

4 Answers4

edit