How can I get a total when iterate an array?

Question

I got an array of an object from the Database and inside every object.

I have a price and count I need to get every item price and after that should I calculate the total price of all items and set it into state.

Here's structure array I got from DB:

state = {
  TotalCountTools: null, // here will get all the total price for every item
  toolsUsed: [
      {
        id: 1,
        name: 'tool 1',
        price: 10,
        count: 3,
      },
      {
        id: 2,
        name: 'tool 2',
        price: 5,
        count: 3,
      },
      {
        id: 3,
        name: 'tool 3',
        price: 1,
        count: 2,
      },
    ],
}

Here's what I tried and it's failed:

renderToolsUsed = () => {
    let {TotalCountTools} = this.state;
    return this.state.toolsUsed.map(({name, id, price, count}, i) => {
      let TotalCount = count * price;
      console.log(TotalCount);
      this.setState({TotalCountTools: TotalCount}, () =>
        console.log(TotalCountTools), // so in every iterate that will set a state and that's wrong i know 
      );

      return (
        <>
          <View>
            <Text key={id}>{name}</Text>
          </View>

          <View>
            <Text key={id}>{price}</Text>
          </View>

          <View>
            <Text key={id}>{count}</Text>
          </View>
       </>
      );
    });
  };

EDIT

after I see all answers I just follow as @Shubh says to get total price so i make another function just to get the total price

 getTotalPrice = () => {
    let total = this.state.toolsUsed.reduce((acc, {price, count}) => {
      acc = acc + price * count;
      return acc;
    }, 0);
    this.setState({totalPriceTools: total}, () =>
      console.log(this.state.totalPriceTools),
    );
  };

and inside a UI i added it

 render() {
  return (
      <View style={{flex: 1}}>
         {this.renderToolsUsed()}
   <>
              <Text
                style={{
                  paddingBottom: 5,
                  fontWeight: '700',
                  fontSize: 17,
                  color: '#9F9F9F',
                  marginLeft: 20,
                }}>
               Total Price:
              </Text>
              {this.getTotalPrice()} // I don't know how can i call this function so i added it here and that's wrong insted of it should i write {this.state.totalPriceTools}
            </>
 )
}

UI

"I add a flag in the state after getting a total price I want to update it and used it in other View"

EDIT 2

I want after render the tools item "map finish" invoke other function "calculate the total prices"

  renderToolsUsed = () => {
    const {toolsUsed} = this.state;
    const prom = toolsUsed.map(({name, id, price, count}) => {
      return (
        <View style={styles.tools}>
          <View style={styles.toolsItem}>
            <Text key={id}>{name}</Text>
          </View>
          <View style={styles.toolsItem}>
            <Text key={id}>{price}</Text>
          </View>
          <View style={styles.toolsItem}>
            <Text key={id}>{count}</Text>
          </View>
        </View>
      );
    });
    return Promise.all(prom).then(() => this.getTotalPrice());
  };


  getTotalPrice = () => {
    let total = this.state.toolsUsed.reduce((acc, {price, count}) => {
      acc = acc + price * count;
      return acc;
    }, 0);
    this.setState({totalPriceTools: total}, () =>
      console.log(this.state.totalPriceTools),
    );
  };

I got this error

Invariant Violation: Objects are not valid as a React child (found: object with keys {_40, _65, _55, _72}).

Does this answer your question? [Better way to sum a property value in an array](https://stackoverflow.com/questions/23247859/better-way-to-sum-a-property-value-in-an-array) — Nick Parsons, Dec 12 '19 at 10:06
Try using `toolsUsed.reduce`. It'll let you accumulate a value. — Shawn LaFrance, Dec 12 '19 at 10:06
@MuhammadMuradHaider check the question again! that's enough? — Oliver D, Dec 12 '19 at 10:28
RE: your first edit, just create an other view/component 'View2' with a prop 'total' and in that component's render() method put a span i.e. this.props.total. Then in parent component, call 'getTotalPrice()' in ComponentDidMount() and in it's render() method add View2 as . you'll get it working. — Muhammad Murad Haider, Dec 12 '19 at 12:15

Shubham Dixit · Answer 1 · 2019-12-12T10:16:28.623

1

You can use array.reduce() for the job;

let toolsUsed = [{
    id: 1,
    name: 'tool 1',
    price: 10,
    count: 3,
  },
  {
    id: 2,
    name: 'tool 2',
    price: 5,
    count: 3,
  },
  {
    id: 3,
    name: 'tool 3',
    price: 1,
    count: 2,
  },
]
let total = toolsUsed.reduce((acc, {
  price,
  count
}) => {
  acc = acc + price * count;
  return acc;
}, 0)

console.log(total)
// Or particular total for element
toolsUsed.forEach(ele => {
  ele["total"] = ele.price * ele.count;
})
console.log(toolsUsed)

edited Dec 12 '19 at 10:16

answered Dec 12 '19 at 10:06

Shubham Dixit

9,242
4
27
46

But how can i render the ui ? or make other functions for it? and when i set a state i will get an error `Maximum update depth exceeded` – Oliver D Dec 12 '19 at 10:11
Well Just change the map and use the function I stated. – Shubham Dixit Dec 12 '19 at 10:17
I try but i got the same error when i `setState({totalPriceTool total)` – Oliver D Dec 12 '19 at 10:20

score 1 · Answer 2 · answered Dec 12 '19 at 10:11

1

As I understand this is what you are searching for

const tools = [{
    id: 1,
    name: 'tool 1',
    price: 10,
    count: 3,
  },
  {
    id: 2,
    name: 'tool 2',
    price: 5,
    count: 3,
  },
  {
    id: 3,
    name: 'tool 3',
    price: 1,
    count: 2,
  },
]

const result = {};
tools.forEach((tool) => {
  result[tool.id] = tool.price * tool.count;
})

console.log(result)

answered Dec 12 '19 at 10:11

Yaman KATBY

1,814
10
24

Can u check the question again i add some image details – Oliver D Dec 12 '19 at 10:25

score 0 · Answer 3 · answered Dec 12 '19 at 11:08

0

What i have understood is: you want to calculate total price for every item i.e. price*count, in the array and then sum all calculated prices and set the state. If it is so then you can create a function lets say 'CalculateEachOrderPrice()' in which you will iterate through the array and calculate total amount for each item and simply push the calculated value in an array e.g. prices []. After array is iterated (loop ends), calculate the sum for prices array and set the state. Call CalculateEachOrderPrice() function on ComponentDidMount() or success callback of the method that is returning you the object from database.

answered Dec 12 '19 at 11:08

Muhammad Murad Haider

1,357
2
18
34

That's exactly what i want, i will try it, now can i call a `CalculateEachOrderPrice()` after `renderToolsUsed()` "map" finish? because when a use a `Promise.all()` i got an infinite loop -_- – Oliver D Dec 12 '19 at 11:16
Point is to call the function once you have successfully retrieved the object from db and this CalculateEachOrderPrice() should return the value before component's render method is called (which generates virtual DOM) – Muhammad Murad Haider Dec 12 '19 at 11:19
Yeah i know that, but just a question in my mind to use a Promise – Oliver D Dec 12 '19 at 11:21
yes you may use the promise which when resolved, call the function to render the component – Muhammad Murad Haider Dec 12 '19 at 11:24
can u check the question again :) – Oliver D Dec 12 '19 at 11:27
Yeah but setting state in every iteration is not recommended, resulting in re-rendering the component time and again. you need to set the state once you have the sum of all prices. – Muhammad Murad Haider Dec 12 '19 at 11:31
can you re-edit your answer to achieve ur idea? Sorry about thats but i cant handle it – Oliver D Dec 12 '19 at 11:32
I'm waiting :"D – Oliver D Dec 12 '19 at 11:59
haha, check my comment on your question, you are on right track, go with your first edit then try following what i wrote there – Muhammad Murad Haider Dec 12 '19 at 12:07
I just add getTotalPrice() inside componentDidMount() and work well my question it was why i can't use Promise in this case – Oliver D Dec 12 '19 at 12:11
there was no problem with the promise but guess you were calling the function in render method right? when function got called, it used to set the state, and component is re-rendered as a result of setting the state which would have caused an infinite loop like situation – Muhammad Murad Haider Dec 12 '19 at 12:18
yes i call `renderToolsUsed()` in render function ! – Oliver D Dec 12 '19 at 12:21

How can I get a total when iterate an array?

3 Answers3