I'm building a basic shop app using React. So here I have this function that calculates the final price of the products. Code:

    calculateTotal = () => {
    const total2 =
      this.state.final_apple_price +
      this.state.final_avocado_price +
      this.state.final_branzino_price +
      this.state.final_bread_price +
      this.state.final_burger_price +
      this.state.final_carrot_price +
      this.state.final_cheese_price +
      this.state.final_chicken_price +
      this.state.final_donut_price +
      this.state.final_egg_price +
      this.state.final_falooda_price +
      this.state.final_milk_price +
      this.state.final_muffin_price +
      this.state.final_orange_price +
      this.state.final_pizza_price +
      this.state.final_potato_price +
      this.state.final_salmon_price +
      this.state.final_strawberry_price;
    this.setState({ total: total2 });
  };

The state has:

total: 0,

And here it's supposed to return the values of all the products:

<h1>{this.state.total}</h1>

However, 0 is displayed in the h1, even when items are added.

Another thing which I tried in the calculateTotal function is -

return total2;

and

<h1>{this.calculateTotal()}</h1>

Still, it isn't working. How to fix? Thanks