title: Creating a clear function for budgeting app
body: <p>I am working on creating a clear button that once clicked will clear all the transactions that have been added to the transaction list with localStorage.  My button works but its buggy, once it gets clicked I get the following error about a separate function I have to get the balance. If I refresh the page afterwords though all the transactions will be cleared.</p>
  <p>The error I am receiving ...</p>
  <pre><code>TypeError: amounts.reduce(...).toFixed is not a function
  </code></pre>
  <p>my component</p>
  <pre><code>import react, {useState, useEffect} from 'react'
  import Transaction from './Transaction'
  
  
  const Form = () =&gt; {
  
  //initial state
  const [transaction, setTransaction] = useState({
      description: '',
      amount: ''
    })
    const [list, setList] = useState(
      JSON.parse(localStorage.getItem('list')) || []
    )
    const [balance, setBalance] = useState('')
    const [income, setIncome] = useState(
      JSON.parse(localStorage.getItem('income'))
    )
    const [expense, setExpense] = useState(JSON.parse(localStorage.getItem('expense')))
  
      //updates based onChange value
  const updateBalance = (e) =&gt; {
      setTransaction({
          ...transaction,
          [e.target.name]:
           e.target.type == 'number' ? parseInt(e.target.value) : e.target.value
          })
  }
  
  //identify if transaction is income/expense
  
  const plusMinus = () =&gt; {
      transaction.amount &gt; 0
       ? setIncome(income + transaction.amount)
        : setExpense(expense + transaction.amount)
  }
  // updates balance after transaction is added
  
  const getBalance = () =&gt; {
      const amounts = list.map(i =&gt; i.amount);
      const money = amounts.reduce((acc, item) =&gt; (acc += item), 0).toFixed(2);
      setBalance(money)
    }
    
  useEffect(() =&gt; {
      getBalance()
      localStorage.setItem('list', JSON.stringify(list))
      localStorage.setItem('income', JSON.stringify(income))
      localStorage.setItem('expense', JSON.stringify(expense))
    }, [list])
  
  
  //clear transaction list
  const clearBudget = () =&gt; {
      localStorage.clear();
  }
  
  const onSubmit = e =&gt; {
      e.preventDefault();
      setList([transaction, ...list])
      plusMinus()
      setTransaction({ description: '', amount: ''})
      }
  
  return (
      
      &lt;div&gt;
          &lt;div className='totals'&gt;
          &lt;h2 className='balance'&gt; Current Balance &lt;/h2&gt;
          &lt;h3&gt; ${balance} &lt;/h3&gt;
              &lt;h4&gt; Income: ${income} Expense: ${expense} &lt;/h4&gt;
          &lt;/div&gt;
          &lt; br /&gt;
          &lt; br /&gt;
          &lt; br /&gt;
           &lt;h2 className='trans-history'&gt; Transaction History &lt;/h2&gt;
             {list.map(i =&gt; {
                 return (
                     &lt;div className='trans'&gt;
                         &lt;ul  key={i.description}&gt;
                      {i.description} ${parseInt(i.amount)}
                     &lt;/ul&gt;
                     &lt;/div&gt;
                 )
             })}
             &lt;br /&gt;
             &lt;br /&gt;
          &lt;h2 className='enter-item'&gt; Enter an Item &lt;/h2&gt;
          &lt;form onSubmit={onSubmit}&gt;
         &lt;div&gt; 
             &lt;input 
             type='text' 
             className=&quot;input-trans&quot; 
             placeholder='Enter Transaction'
             value={Transaction.description}
             name='description'
             onChange={updateBalance}
             &gt;
             &lt;/input&gt;
          &lt;/div&gt; 
          &lt;div&gt;
          &lt;input 
          type='number'
           className='input-trans' 
           placeholder='Enter Amount'
           name='amount'
           value={transaction.amount}
           onChange={updateBalance}
           &gt;
          &lt;/input&gt;
          &lt;/div&gt;
          &lt;br/&gt;
          &lt;div className='button-container'&gt;
              &lt;button type='submit' className='button is-primary'&gt; Submit &lt;/button&gt;
              &lt;button className='button is-danger' onClick={clearBudget}&gt; Clear &lt;/button&gt;
          &lt;/div&gt;
      &lt;/form&gt;
      &lt;/div&gt;
   )
  }
  
  export default Form
  </code></pre>