Dealing with state in <form> onSubmit React
<p>So I'm starting to play around with React and am trying to wrap my head around state. I'm running into this issue with an onSubmit action on a form where it doesn't clear the input field after it's triggered. A fairly trivial issue, but I feel like there's a broader lesson in here about the whole component interacts that I'm missing. </p>

<pre><code>'use strict'
const SmithyForm = React.createClass({
  displayName: "SmithyForm",

  getInitialState: function() {
    return { placeholder: "tweet" };
  },
  handleChange: function(event) {
    this.setState({value: event.target.value});
  },
  handleSubmit: function(event) {
    $.post('/test', { data: this.state.value }).done(function(data) {
      console.log(data)
    });
    event.preventDefault();
   },
  render: function() {
    var placeholder = this.state.placeholder;
    return (
        &lt;form onSubmit={this.handleSubmit}&gt;
          &lt;input type="text" placeholder={placeholder} onChange={this.handleChange} /&gt;
          &lt;button&gt; smithy&lt;/button&gt;
        &lt;/form&gt;
    );
  }
})

ReactDOM.render(&lt;SmithyForm /&gt;, document.body )
</code></pre>

<p>So, my question is: What about my structure is preventing onSubmit from clearing the input field? (The code itself all works, component renders a form with a button. When the button is clicked the form makes an ajax request to a Node/Express backend which sends back the text entered into the input field.)</p>

<p>EDIT/ANSWER: The two pieces I missed were a default <code>value: ""</code> set in the getInitialState function and the subsequent call to that state in the render function <code>var value = this.state.value;</code></p>

<p>One thing I'm still not as clear on as I'd like to be—which @Dan was alluding to—is the rerendering process of the component after it onSubmit is triggered. </p>