CODEWITHSUNDEEP
javascriptcssreactjsmaterial-ui
Brian
Brian

Reputation: 187

Material UI Toggle Button state

I am using a Material UI's ToggleButton/ToggleButtonGroup, but can not figure out how to get the ToggleButton highlighted when clicked, and un-highlighted when another button in the group is clicked. The button currently works to register input, but does not show selection. I would like the user to only be able to select one of the three options.

handleToggleChange = (date, newValue) => {
    this.setState({
        [date]: newValue
    })
}

<ToggleButtonGroup onChange={(e, value) => this.handleToggleChange("date", value)} 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>

Upvotes: 0

Views: 6612

Answers (1)

Domino987
Domino987

Reputation: 8774

You are missing the most important prop: value

<ToggleButtonGroup
  value={alignment}
  exclusive
  onChange={handleAlignment}
  aria-label="text alignment"
>

It seems like you are correctly updating your state, put you do not let the component know what is currently selected. You only need to save the current value selected.

handleToggleChange = (e, value) => {
    this.setState({
        date: value
    })
}

<ToggleButtonGroup
      value={this.state.date}
      onChange={handleToggleChange }
      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>

Upvotes: 1

Related Questions