I am trying to implement the ToggleButtonGroup feature from Material UI in my React application. I am facing an issue where I am unable to pass values into my state correctly. The code snippet provided below shows that while the Select component works fine and can change the state's date, the ToggleButtonGroup does not. I want the ToggleButtonGroup to function similar to the Select component as it aligns better with my UI design. Can someone please point out where I might be going wrong?
state = {
text: '',
date: ''
}
handleChange = (event) => {
this.setState({
[event.target.name]: event.target.value
})
}
handleSubmit = (event) => {
event.preventDefault()
// Do nothing if input field is empty.
if (this.state.text === '') {
return
}
// Submit the form.
this.props.onSubmit({
id: shortid.generate(),
text: this.state.text,
date: this.state.date,
complete: false
})
// Clear input field after submission.
this.setState({
text: ''
})
}
<Select onChange={this.handleChange} name="date" id="date-select" variant="standard">
<MenuItem value=""></MenuItem>
<MenuItem value="today">Today</MenuItem>
<MenuItem value="tomorrow">Tomorrow</MenuItem>
<MenuItem value="week">This week</MenuItem>
</Select>
<ToggleButtonGroup onChange={this.handleChange} value="date" name="date" id="date-select" exclusive={true} size="small">
<ToggleButton value="today">Today</ToggleButton>
<ToggleButton value="tomorrow">Tomorrow</ToggleButton>
<ToggleButton value="week">This week</ToggleButton>
</ToggleButtonGroup>