Bootstrap Checkbox Not Toggling - reactjs

Question

I am using a Bootstrap checkbox and a regular one. Why is the Bootstrap Checkbox failing to toggle, while the regular input field succeeds to toggle?
onChange = (evt) => {
const target = evt.target;
const name = target.name;
const value = target.type === 'checkbox' ? target.checked : target.value;
this.setState({
[name]: value
});
this.props.onChange({ name, value });
};
<input
name="unlimited"
type="checkbox"
checked={this.state.unlimited}
onChange={this.onChange} />
<Checkbox
name="unlimited"
onChange={this.onChange}
checked={this.state.unlimited}
>
UNLIMITED {this.state.unlimited.toString()}
</Checkbox>
EDIT
I made a bunch of mistakes when I originally posted code. Above is the corrected code.
EDIT
I am convinced this is a bug because Bootstrap JS library is interfering, see here.

Answer 1

You are passing to checked prop of the Checkbox a value from the parent via props. Are you sure you update the new state in the parent and passing a new prop again?
Here is an example using your code:
const { Checkbox } = ReactBootstrap;
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
unlimited: false
};
}
onChange = (evt) => {
const target = evt.target;
const name = target.name;
const value = target.type === 'checkbox' ? target.checked : target.value;
this.setState({
[name]: value
});
};
render() {
const { unlimited } = this.state;
return (
<div>
<input
name="unlimited"
type="checkbox"
checked={this.state.unlimited}
onChange={this.onChange} />
<Checkbox
name="unlimited"
onChange={this.onChange}
checked={this.state.unlimited}
>
UNLIMITED {this.state.unlimited.toString()}
</Checkbox>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById("root"));
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-bootstrap/0.31.3/react-bootstrap.min.js"></script>
<div id="root"></div>
Edit
Any experience in overriding the bootstrap.js? it is on the global
template page of our app (PHP smarty)
I'm not a PHP expert but i guess you can conditionally render the script tag of bootstrap.js, So when you redirected to the page that use your react application just don't render the <script> tag.

Answer 2

you have a controlled input - see https://reactjs.org/docs/forms.html#controlled-components
in this case, the checked is bound to your parent component's prop fields={unlimited}
you tells your parent via onChange={} that there's a new name and value - it will be up to it to setState() in a way that passes a new fields.unlimited
Eg, your stateful parent can be:
class Foo extends Component {
state = {
unlimited: false
}
onChange = (name, value) => this.setState({[name]: value})
render(){
return <MyOtherComponent fields={this.state} onChange={this.onChange} />
}
}
if your component is stateful itself (looking at your handleChange), then you can convert to uncontrolled (https://reactjs.org/docs/uncontrolled-components.html) or bind to your local state if you sync it from props on mount and when it gets props.