I've encountered an issue with my react-bootstrap ToggleButtons. Whenever I click on them, the handlePlatformChange() function is triggered twice - first with the correct id and then immediately after with null. I tried including e.preventDefault() in the function, but it caused the buttons not to toggle properly. I've tried everything I can think of, so any advice would be greatly appreciated.
import React, {Component} from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import './App.css';
import Button from 'react-bootstrap/Button';
import ToggleButton from 'react-bootstrap/ToggleButton';
import ToggleButtonGroup from 'react-bootstrap/ToggleButtonGroup';
class App extends Component {
constructor () {
super();
this.state = {
User : "",
Platform: "battle",
Player: "",
Level: ""
};
this.handleChange = this.handleChange.bind(this);
}
handlePlatformChange = (e) => {
this.setState({Platform: e.target.id}, function () {
console.log(this.state.Platform);
});
}
handleChange(e) {
if (e.target.id === "usernameinput") {
this.setState({User: e.target.value});
}
}
render() {
return (
<div className="infoSection">
<div className="center">
<input type="text" id="usernameinput" value={this.state.value} onChange={this.handleChange} placeholder="Username" /><br/>
<ToggleButtonGroup id="buttongroup" name="buttongroup" defaultValue={[1]}>
<ToggleButton id="battle" value={1} variant="secondary" onClick={this.handlePlatformChange}></ToggleButton>
<ToggleButton id="acti" value={2} variant="secondary" onClick={this.handlePlatformChange}></ToggleButton>
<ToggleButton id="psn" value={3} variant="secondary" onClick={this.handlePlatformChange}></ToggleButton>
<ToggleButton id="xbl" value={4} variant="secondary" onClick={this.handlePlatformChange}></ToggleButton>
</ToggleButtonGroup>
<br/>
<Button id="searchButton" variant="primary">Search</Button>
<div className="displaySection">
<p id="displayHeader">Username: {this.state.Player}<br/>
Level: {this.state.Level}</p>
<p id="displayInfo1">some info here</p>
<p id="displayInfo1">some info here</p>
</div>
</div>
</div>
);
}
}
export default App;