Change CheckboxGroup into a fully controlled component
mcuppi opened this issue · 0 comments
I suggest changing CheckboxGroup into a fully controlled (stateless) component.
The README states:
Status of checkboxes (checked/unchecked) can be controlled from outside by passing new values to <CheckboxGroup> (e.g. <CheckboxGroup values={this.state.checkedItems} />).
This is only true upon initialization. Any changes to this.state.checkedItems
afterward will not be applied. For example:
<button onClick={() => this.setState({ checkedItems: [] })}>Clear</button>
<CheckboxGroup name="fruits" values={this.state.checkedItems} onChange={(e, values) => this.setState({ checkedItems: values })}>
<Checkbox value="kiwi" /> Kiwi
<Checkbox value="pineapple" /> Pineapple
<Checkbox value="watermelon" /> Watermelon
</CheckboxGroup>
In this example, I created a button that clears the this.state.checkedItems
variable. However, the button does nothing. This is because CheckboxGroup is not stateless and it does not listen for changes to its values
property.
If you want to change this behavior, I think the best approach is to make the component stateless (rather than adding depreciated functions like componentWillReceiveProps
). I've submitted a pull request which makes the necessary changes to make CheckboxGroup fully controlled.