title: ReactJS bootstrap form without refreshing page
body: <p>I have a form in my very basic React app where I want to allow the user to enter text and create their username by updating state. However when the "OK" button is clicked, the created username appears on the page for about half a second then the page auto-refreshes and restores the default state. It only happens when the button is contained within a form element. It works fine and the page doesn't refresh when I remove the form element, however I don't want to sacrifice the style and formatting of the bootstrap form. Here's my render method:</p>
  
  <pre><code>render() {
     return (
       &lt;div class="container-fluid text-center"&gt;
          &lt;form class="form-inline"&gt;
            &lt;input type="text" class="form-control" placeholder="UserName"/&gt;
            &lt;button onClick={this.createUser.bind(this)} class="btn btn-primary"&gt;OK&lt;/button&gt;
          &lt;/form&gt;
        &lt;h1&gt;User: {this.state.userName}&lt;/h1&gt;
        &lt;h1&gt;Points: {this.state.points}&lt;/h1&gt;
      &lt;/div&gt;
    )
  }
  </code></pre>