How to access a key value within State in a function?

Question

I'm trying to make a counter that adds up a total amount for items added to a webcart. I initialize this count within my this.state constructor. However, I'm having problems pushing a count total to it from a function within the same component. This is my Cart component:

import React, { Component } from 'react';
import {addCart} from './Shop'; 
import { connect } from 'react-redux';

export class Cart extends Component {
    constructor(props) {
        super(props);
        this.state = {items: this.props.cart,cart: [],total: 0};
    }

    itemBucket(item) {
        this.state.cart.push(this.state.items);
        this.countTotal();
    }

    countTotal() {
        console.log(this.state.cart);
        this.state.cart.forEach(function(item, index){
            var total = this.state.total;
            this.state.total = this.state.total + item.price;
        })
    }

    ...

    render() {
        return(
            <div className= "Webcart" id="Webcart">
            </div>
        );
    }
}


...

In my countTotal function I want to push the total to this.state.total. Right now I'm getting this error Uncaught TypeError: Cannot read property 'state' of undefined. How can I push the count total to total in state?

Possible duplicate of [React 'cannot read property of undefined' despite correct binding](https://stackoverflow.com/questions/45010544/react-cannot-read-property-of-undefined-despite-correct-binding) — Shubham Khatri, Aug 02 '17 at 05:30

Josiah Keller · Accepted Answer · 2017-08-02T01:30:03.150

4

Use an arrow function so that this is preserved.

this.state.cart.forEach((item, index) => {
    // ...
})

edited Aug 02 '17 at 01:30

answered Aug 02 '17 at 01:20

Josiah Keller

3,635
3
23
35

score 1 · Answer 2 · answered Aug 02 '17 at 01:18

1

You need to bind your functions, to get access to this in functions body:

constructor(props) {
    super(props);
    this.itemBucket = this.itemBucket.bind(this);
    this.countTotal = this.countTotal.bind(this);
    this.state = {items: this.props.cart,cart: [],total: 0};
}

answered Aug 02 '17 at 01:18

Andrii Starusiev

7,564
2
28
37

Ah! Right. Thanks. – feners Aug 02 '17 at 01:21
And sure, don't forget context in `forEach` – Andrii Starusiev Aug 02 '17 at 01:24
Yeah I was just about to ask you that, how should I pass it to the `forEach` function? – feners Aug 02 '17 at 01:26
`let self = this; this.state.cart.forEach(function(item, index){ var total = self.state.total; self.state.total = self.state.total + item.price; })` – Nitin Verma Aug 02 '17 at 01:28
1

@feners you should use an arrow function as per Josiah's answer, and you do not need to bind your functions. – Sven Aug 02 '17 at 01:31
Yep, sure, the arrow function and variant with `self` from Nitin will help you, but without binding of functions is will not work, not sure why is someone downvoted my answer... – Andrii Starusiev Aug 02 '17 at 04:26

How to access a key value within State in a function?

2 Answers2