Reactjs - Can't get value from array, undefined

Question

I am trying to compare the values from 2 state arrays, but when I look at the value of otherItems[i] I get undefined. For clarification, Items is an array of Objects with many data points, why I'm calling it with .name, while otherItems is just an array of the names. If I call just this.state.otherItems then I get the full array contents.

this.state = {
  Items: [],
  otherItems: [],
  ...
}
...
function = () => {
  var total = this.state.total;
  var i;
  for(i = 0; i < this.state.Items.length; i++) {
    console.log(this.state.otherItems[i]);
    if(this.state.Items[i].name === this.state.otherItems[i]) {
      total += parseFloat(this.state.Items[i].price)
    }
  }
  this.setState({Total: total})
}

What I would like to happen is the items from the two arrays compare, and the price of the item is added to the total sum if and only if the item i from Items exists in otherItems.

You are logging basketItems[i], not otherItems[i]. Is that what you mean gives you undefined? — Tholle
– Tholle, Commented Mar 10, 2019 at 21:27
@Tholle ah sorry that was a type, should be otherItems. I fixed it now. — taway0282
– taway0282, Commented Mar 10, 2019 at 21:29
You have a typo in console.log(this.state.otehrItems[i]); it should be console.log(this.state.otherItems[i]); — Nils Kähler
– Nils Kähler, Commented Mar 10, 2019 at 21:30
Alright. Could you clarify what it is you are trying to accomplish? Please provide a Minimal, Complete, and Verifiable example as it will make it a lot easier for someone to help you. — Tholle
– Tholle, Commented Mar 10, 2019 at 21:31
@NilsKähler Yes that was another typo I made when I made an edit. — taway0282
– taway0282, Commented Mar 10, 2019 at 21:31

Tholle · Accepted Answer · 2019-03-10 23:44:42Z

2

You are using a loop variable i and using that to index both arrays, so you are only comparing elements with the same index between the two arrays, and the two arrays might differ in length.

You could instead use includes to check if the name of an element in Items is present in the otherItems array.

getTotal() {
  this.setState(({ total = 0, Items, otherItems }) => {
    Items.forEach(item => {
      if (this.state.otherItems.includes(item.name)) {
        total += parseFloat(item.price);
      }
    });

    return { otherTotal: total };
  });
}

edited Mar 10, 2019 at 23:44

answered Mar 10, 2019 at 21:36

Tholle

113k22 gold badges209 silver badges198 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Hugo Barragon Over a year ago

very good answer with prevState implemented to avoid async conflits

taway0282 Over a year ago

I tried this, but for some odd reason total returns as NaN or Not a Number.

Tholle Over a year ago

@taway0282 Alright. Could you include all relevant code in your question? It might be that it's called Total instead of total, or something else that the current code doesn't show.

taway0282 Over a year ago

If there are any small inconsistencies, such as total instead of Total it's not the actual problem, just a transcription mistake. In the code editor it's the correct variable name.

taway0282 Over a year ago

This worked with minor tweaks, thank you very much :) Should I post the tweaked version as an edit or how should I go about this?

|

Collectives™ on Stack Overflow

Reactjs - Can't get value from array, undefined

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related