title: React JS (Bootstrap) form saves every input in local storage instead of using onSubmit
body: <p>New to React JS here and trying to make a form (that's in a modal) to save the submit of a text input and text area to local storage. The value of these 2 input are mapped to my Form State. My Form Component has a button with onSubmit function that should send the object to local storage, once <em>the user clicks it</em>. But what happens is that it saves every letter that I type as a separate entry to local storage and not the whole thing when user clicks the button. What am I doing wrong here?</p>
  
  <p>So suppose I want to save <code>{name: "oatmeal", ingredients: ["milk, "oat"]}</code>, it saves:</p>
  
  <pre><code>{name: "o", ingredients: []}
  {name: "oa", ingredients: []}
  {name: "oat", ingredients: []}
  </code></pre>
  
  <p>etc. as I type....</p>
  
  <p>Here is my code:</p>
  
  <pre><code>var App = React.createClass({
  
  
    render: function(){
  
      return( 
  
        &lt;div className="container"&gt;
          &lt;h1&gt;Recipe Box&lt;/h1&gt;
          &lt;AddRecipeButton /&gt;
        &lt;/div&gt;
  
      )  
  
    }
  
  
  });
  
  
  var AddRecipeButton = React.createClass({
  
  
    getInitialState(){
  
  
      return {showModal: false};
  
    },
  
    close: function(){
  
      this.setState({showModal:false});
  
    },
  
    open: function(){
  
      this.setState({showModal:true});
  
    },
  
    render: function(){ 
  
      return (
  
        &lt;div&gt;
          &lt;Button bsStyle="warning" bsSize="large" onClick={this.open}&gt;
              Add Recipe
          &lt;/Button&gt;
          &lt;Modal show={this.state.showModal} onHide={this.close}&gt;
              &lt;Modal.Header closeButton&gt;
                &lt;Modal.Title&gt;Add a Recipe Here&lt;/Modal.Title&gt;
              &lt;/Modal.Header&gt;
              &lt;Modal.Body&gt;
                &lt;Form /&gt;
              &lt;/Modal.Body&gt;
          &lt;/Modal&gt;
        &lt;/div&gt;
  
  
        )
    }
  
  });
  
  var Form = React.createClass({
  
    getInitialState(){
  
  
      return {
  
        name: "", 
  
        ingredients: [ ]
  
      };
  
    },
  
    getValidationStateName(){
  
      var length = this.state.name.length;
  
      if(length &gt; 0) {
  
        return "success";
  
      } else {
  
        return "error";
  
      }
  
    },
  
    getValidationStateIngredients(){
  
      var length = this.state.ingredients.length;
  
      if(length &gt; 0){
  
        return "success";
  
      } else {
  
        return "error";
  
      }
  
  
    },
  
    handleInput: function(key,e){
  
  
      var input = e.target.value;
  
  
      if(key === "ingredients"){
  
          input = e.target.value.split(",");  
  
      }
  
      var update = {};
      //create object to merge with state
  
      update[key] = input;
      //set the value of input field to update object
  
      console.log(update);
  
      this.setState(update, function(){
      //merge the object into the state  
  
        console.log(this.state);
  
      });
  
  
    },
  
    handleSubmit(){
  
      var recipe = JSON.stringify(this.state);
  
      localStorage.setItem(this.state.name, recipe);
  
    },
  
    render: function(){
  
  
      return (
  
        &lt;form&gt;
          &lt;FormGroup controlId="formNameText" validationState = {this.getValidationStateName()}&gt;
            &lt;ControlLabel&gt;Recipe&lt;/ControlLabel&gt;
            &lt;FormControl
              type="text"
              placeholder="Give your recipe a name"
              value={this.state.name}
              onInput={this.handleInput.bind(this,'name')}
              /&gt;
            &lt;FormControl.Feedback /&gt; 
          &lt;/FormGroup&gt;  
            &lt;br/&gt;
          &lt;FormGroup controlId="formIngredientsTextarea" validationState = {this.getValidationStateIngredients()}&gt;
            &lt;FormControl
              componentClass="textarea"
              placeholder="Insert your ingredients, separated by a comma"
              value={this.state.ingredients}
              onInput={this.handleInput.bind(this,'ingredients')}
            /&gt;  
            &lt;FormControl.Feedback /&gt; 
            &lt;hr/&gt;
          &lt;/FormGroup&gt;
          &lt;Button bsStyle="primary"  onSubmit={this.handleSubmit()}&gt;Submit&lt;/Button&gt;
        &lt;/form&gt;  
  
  
      );
  
    }
  
  });
  
  ReactDOM.render(&lt;App /&gt;, document.getElementById('app'));
  </code></pre>