title: React form sending empty object
body: <p>I am trying to send user input in a form component to the component managing the state. I tried to use a callback but my input is not being sent.</p>
  
  <p>Tried to use the form object in a callback</p>
  
  <pre><code>//here is the form component
  
  class ListForm extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        NewItem: {
          itemText: "",
          id: Date.now(),
          completed: false
        }
      };
    }
  
    handleChanges = e =&gt; {
      this.setState({...this.state,
        NewItem: { ...this.state.NewItem, [e.target.name]: e.target.value }
      });
    };
  
    submitItem = e =&gt; {
       this.setState({ itemText: "" });
      this.props.addItem(e, this.state.NewItem);
  
    };
  
    render() {
      return (
        &lt;form onSubmit={this.submitItem}&gt;
          &lt;input
            type="text"
            value={this.state.NewItem.itemText}
            name="itemText"
            onChange={this.handleChanges}
          /&gt;
          &lt;button&gt;Add&lt;/button&gt;
        &lt;/form&gt;
      );
    }
  }
  
  export default ListForm;
  </code></pre>
  
  <pre><code>addItem is in the parent component and looks like this. Groceries is just an array of objects with itemText, id and completed 
  
  addItem = (e, item) =&gt; {
      e.preventDefault();
          this.setState({
        ...this.state,
        groceries: [...this.state.groceries, item]
      });
    };
  </code></pre>
  
  <p>I can enter in the form, but when I hit enter, nothing is added to the list</p>