title: ReactJs subtract two inputs for balance project
body: <p>Hello i am learning <strong>reactjs</strong> and i have a problem.</p>
  
  <p>I have two inputs one that handles income and one that handles outcome.
  I want to calculate the balance (<code>income - outcome</code>) dynamically without submit button. </p>
  
  <p>The problem with my code is that when I adding the value in the input I have to add a space in the end of outcome to get and calculate the balance. This is my code.</p>
  
  <pre><code>import React, { Component } from 'react';
  
  class Form extends Component {
      constructor(props){
          super(props);
          this.state={
              income:0,
              outcome:0,
              balance:0
          }
      this.handleChange = this.handleChange.bind(this);
      }
  
      handleChange(e){
          this.setState({[e.target.name]: e.target.value});
          this.setState({balance: this.state.income - this.state.outcome});
      }
      render() {
          return (
              &lt;div className="form"&gt;
                  &lt;form method=""&gt;
                      &lt;label htmlFor="income"&gt;income &lt;/label&gt;
                      &lt;input name="income" type="text" onChange={this.handleChange}&gt;&lt;/input&gt;
                      &lt;label htmlFor="outcome"&gt;outcome &lt;/label&gt;
                      &lt;input name="outcome" type="text" onChange={this.handleChange}&gt;&lt;/input&gt;
                  &lt;/form&gt;
  
                  &lt;h6&gt;income: {this.state.income}&lt;/h6&gt;
                  &lt;h6&gt;outcome: {this.state.outcome}&lt;/h6&gt;
                  &lt;h6&gt;balance: {this.state.balance}&lt;/h6&gt;
              &lt;/div&gt;
          );
      }
  }
  
  export default Form;    
  </code></pre>