title: How to sum values of multiple inputs using onChange event | ReactJS
body: <p>I have multiple inputs where user fill these inputs with numbers. I need a way to sum up the values of these inputs when user types in any input.</p>
  
  <p><strong>My Code</strong></p>
  
  <pre><code>const [values,set_values] = useState({
      sales:'',
      bank_deposit:'',
      supply:'',
      expenses:''
  })
  
  const values_handler = (e) =&gt; {
      let name= e.target.name;
      let value= e.target.value;
      values[name]=value;
      set_values(values)
  
      // Calling the method to sum the value
      calc_total(value) 
  }
  
  const [total,set_total]=useState(0);
  
  const calc_total = (value) =&gt; {
      total +=value;
      set_total(total)
  }
  
  &lt;input type='number' onChange={value_handler} name='sales' /&gt;
  &lt;input type='number' onChange={value_handler} name='bank_deposit' /&gt;
  &lt;input type='number' onChange={value_handler} name='supply' /&gt;
  &lt;input type='number' onChange={value_handler} name='expenses' /&gt;
  </code></pre>
  
  <p><strong>Problem</strong></p>
  
  <p>The problem with this is that the values are summed up each time the value of an input got a chane, so that if user enters 15, it sums 1 then 5 since the mehtod is executed when a change occurred on the input's value.</p>