Problems with React-Bootstrap button - button

Question

This is what i'm trying to do https://react-bootstrap.github.io/components.html#btn-groups but when I click on one of the buttons I want another function to be called
<ButtonGroup>
<Button onClick = {this.onSubmit.bind(this,1)} key={1} active = {this.state.i == 1}>LEFT</Button>
<Button onClick = {this.onSubmit.bind(this,2)} key={2} active = {this.state.i == 2}>MIDDLE</Button>
<Button onClick = {this.onSubmit.bind(this,3)} key={3} active = {this.state.i == 3}>RIGHT</Button>
</ButtonGroup>
onSubmit(new_i: number) {
this.setState({
i: new_i
});
}
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.

Answer 1

I would suggest if you're trying to make a item active by changing it CSS or adding a CSS class showing it's active you do something like so, this is a basic example showing that a style is being applied to an element based on the state of i.
https://jsfiddle.net/chrshawkes/64eef3xm/
<div id="container">
<!-- This element's contents will be replaced with your component. -->
</div>
var Hello = React.createClass({
getInitialState: function () {
return { i: 1 }
},
onSubmit: function (value) {
this.setState({ i: value })
},
render: function() {
return (
<div>
<div onClick = {this.onSubmit.bind(this,1)} key={1} style = {this.state.i == 1 ? {color: "red"} : {color: "blue"}}>LEFT</div>
<div onClick = {this.onSubmit.bind(this,2)} key={2} style = {this.state.i == 2 ? {color: "red"} : {color: "blue"}}>MIDDLE</div>
<div onClick = {this.onSubmit.bind(this,3)} key={3} style = {this.state.i == 3 ? {color: "red"} : {color: "blue"}}>RIGHT</div>
</div>
)
}
});
ReactDOM.render(
<Hello name="World" />,
document.getElementById('container')
);