title: React form event.preventDefault() not working if handler calls setState on sibling component
body: <p>Below is a simple case with three components: App, ExmpleDataConsumer, and ExampleForm. App contains the other two. </p>
  
  <p>I want the contents of the textarea in ExampleForm to be transmitted to ExampleDataConsumer's state when the form is submitted. Setting ExampleDataConsumer's state in <code>doParse</code> triggers a render which seems to be causing the form to submit, reloading the page, even though the <code>handleSubmit</code> method of ExampleForm calls <code>event.preventDefault()</code>. </p>
  
  <p>If I just log <code>data</code> to the console, <code>preventDefault()</code> works and the page does not refresh. What am I missing? Is this the wrong way to pass state between sibling components? Any help would be most appreciated. </p>
  
  <pre><code>    class App extends React.Component {
      constructor(props) {
          super(props);
          this.exampleForm = &lt;ExampleForm doSomething = {this.doParse.bind(this)} /&gt;;
          this.exampleDataConsumer = &lt;ExampleDataConsumer data="Hello, World!"/&gt;;
      }
  
      doParse(data) {
          console.log('In App: ', data);
          this.exampleDataConsumer.setState({data: data});
      }
  
    render() {
      return (
        &lt;div className="App"&gt;
            {this.exampleForm}
            {this.exampleDataConsumer}
        &lt;/div&gt;
      );
    }
  }
  
  class ExampleDataConsumer extends React.Component {
      constructor(props) {
          super(props);
          this.state = {
              data: props.data
          };
      }
  
      render() {
          return ( &lt;div&gt;{this.state.data}&lt;/div&gt;)
      }
  }
  
  class ExampleForm extends React.Component {
      constructor(props) {
          super(props);
          this.state = {
              value: 'Some starter text.'
          };
  
          this.handleSubmit = this.handleSubmit.bind(this);
      }
  
      handleSubmit(event) {
          this.props.doSomething(this.state.value);
          this.setState({value: ''});
          event.preventDefault();
      }
  
      render() {
          return (
              &lt;form onSubmit={this.handleSubmit}&gt;
                  &lt;label&gt;
                      &lt;textarea rows="20" cols="200" value={this.state.value} readOnly/&gt;
                  &lt;/label&gt;
                  &lt;input type="submit" value="Parse" /&gt;
              &lt;/form&gt;
          );
      }
  }
  </code></pre>