manuelbieh/react-checkbox-context

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.