title: Problems with React-Bootstrap button
body: <p>This is what i'm trying to do <a href="https://react-bootstrap.github.io/components.html#btn-groups" rel="nofollow">https://react-bootstrap.github.io/components.html#btn-groups</a> but when I click on one of the buttons I want another function to be called</p>
  
  <pre><code>&lt;ButtonGroup&gt;
      &lt;Button onClick = {this.onSubmit.bind(this,1)} key={1} active = {this.state.i == 1}&gt;LEFT&lt;/Button&gt;
      &lt;Button onClick = {this.onSubmit.bind(this,2)} key={2} active = {this.state.i == 2}&gt;MIDDLE&lt;/Button&gt;
      &lt;Button onClick = {this.onSubmit.bind(this,3)} key={3} active = {this.state.i == 3}&gt;RIGHT&lt;/Button&gt;
  &lt;/ButtonGroup&gt;
  
  
    onSubmit(new_i: number) {
      this.setState({
         i: new_i  
      });
    }
  </code></pre>
  
  <p>I want only one button to be active at a time, the one I click on.
  The default value of i is 1. So when I start the program the LEFT button is active and the 2 others are not, which is what I want. But after I cannot click on the other buttons because the value is always 1. And finally my question is how can I change the value on I only the I click on a button.</p>