title: Display to two decimal places - React.Js
body: <p>I am trying to display the results of a calculation to two decimal points.  The function I created has the behavior of taking an attribute from an object (the "amount" attribute) and will either add it to a starting balance (startBal) or will add it to the previous runningTotal attribute (runnigTotal).  After completeing this calculation, I want the result to display to two decimal places, as this is a finance application I am writing.  </p>
  
  <p>I am trying to use the .toFixed() method, but in reality I am not tied this method, I just want it to work.</p>
  
  <p>Here is my main component.  The relevant function is addRunningTotal()</p>
  
  <pre><code>import React, { Component } from 'react';
  
  import TransactionSearch from './transactionSearch.js';
  import PendingTransactions from './pendingTransactions.js';
  import Transactions from './transactions.js';
  
  class CheckingAccount extends Component {
    state = {
      startBal: 1000,
      pendingTransData: [
        { id: 0, date: '1/1/2020', transaction: "gas", amount: -25.45 },
        { id: 1, date: '1/2/2020', transaction: "cell phone", amount: -127.35 },
        { id: 2, date: '1/3/2020', transaction: "car payment", amount: -303.97, },
      ],
      transactionData: [
        {
          id: 0,
          date: '1/1/2020',
          transaction: "gas",
          amount: -35.45,
          runningTotal: null
        },
        {
          id: 1,
          date: '1/2/2020',
          transaction: "cell phone",
          amount: -227.35,
          runningTotal: null
        },
        {
          id: 2,
          date: '1/3/2020',
          transaction: "car payment",
          amount: -403.97,
          runningTotal: null
        },
      ]
    }
  
    addRunningTotal() {
      let { transactionData, startBal } = this.state
  
      console.log('start Balance: ', startBal);
      let prevAmount, running;
      transactionData.map((el, i) =&gt; {
        if (i === 0) {
          running = el.runningTotal = el.amount + startBal;
          prevAmount = el.runningTotal;
  
          console.log(running.toFixed(2))
          return running.toFixed(2);
        } else if (i &gt; 0) {
          running = el.runningTotal = prevAmount + el.amount;
          prevAmount = el.runningTotal;
  
          console.log(running.toFixed(2))
          return running.toFixed(2);
        }
      });
      console.log('out of map function')
      console.log(transactionData);
  
      this.setState({ transactionData: transactionData, startBal: startBal });
    };
  
    componentDidMount() {
      this.addRunningTotal()
    }
  
    render() {
      let pendTransData = (
        &lt;div&gt;
          &lt;h1&gt;PendingTransactions&lt;/h1&gt;
          &lt;table&gt;
            &lt;tr&gt;
              &lt;th&gt;Date&lt;/th&gt;
              &lt;th&gt;Transaction&lt;/th&gt;
              &lt;th&gt;Amount&lt;/th&gt;
            &lt;/tr&gt;
          &lt;/table&gt;
          {this.state.pendingTransData.map((pendingTransData, index) =&gt; {
            return &lt;PendingTransactions
              key={pendingTransData.id}
              date={pendingTransData.date}
              transaction={pendingTransData.transaction}
              amount={pendingTransData.amount} /&gt;
          })}
        &lt;/div&gt;
      );
  
      let transData = (
        &lt;div&gt;
          &lt;h1&gt;Transaction Component&lt;/h1&gt;
          &lt;table&gt;
            &lt;tr&gt;
              &lt;th&gt;Date&lt;/th&gt;
              &lt;th&gt;Transaction&lt;/th&gt;
              &lt;th&gt;Amount&lt;/th&gt;
              &lt;th&gt;Running Total&lt;/th&gt;
            &lt;/tr&gt;
          &lt;/table&gt;
          {this.state.transactionData.map((transactionData, index) =&gt; {
            return &lt;Transactions
              key={transactionData.id}
              date={transactionData.date}
              transaction={transactionData.transaction}
              amount={transactionData.amount}
              runningTotal={transactionData.runningTotal} /&gt;
          })}
        &lt;/div&gt;
      );
  
      return (
        &lt;div className="App" &gt;
          &lt;h1&gt; Checking Account&lt;/h1&gt;
          &lt;TransactionSearch /&gt;
          {pendTransData}
          {transData}
        &lt;/div&gt;
      );
    };
  };
  
  export default CheckingAccount;
  </code></pre>
  
  <p>Here is my child component.  </p>
  
  <pre><code>import React from 'react';
  
  function Transactions(props) {
    return (
      &lt;tr&gt;
        &lt;td&gt;{props.date} &lt;/td&gt;
        &lt;td&gt;{props.transaction}&lt;/td&gt;
        &lt;td&gt;{props.amount}&lt;/td&gt;
        &lt;td&gt;{props.runningTotal}&lt;/td&gt;
      &lt;/tr&gt;
  
    );
  }
  
  export default Transactions;
  </code></pre>
  
  <p>I expected to see the running total column displayed to two decimal places, but for some reason it displays to about 13 decimal places.  I am further confused because the console.log's I've used outputs to two decimal places.  </p>