Reputation: 1751
I have a dropdown selection that renders a few options, when one of the options are selected the same name
that's selected should also be checked in the checkbox section.
I have mocked up a quick reproduction in a codesandbox.
I was thinking something along the lines of holding a selected value on the data object:
this.state = {
//other state values
selectedName: true
};
Then map the checkbox values on it -- I'm unsure of this part. And somehow the state inside updateSelectorField
needs to be updated with the selected value.
updateSelectorField = e => {
this.setState({ selectorField: e.target.value });
};
Upvotes: 1
Views: 851
Reputation: 59551
To achieve what you want, you just need to change the value
prop on your CheckboxGroup
component from this.state.fieldNames
to this.state.selectorField
.
Like so:
<CheckboxGroup
checkboxDepth={5}
name="fieldNames"
value={this.state.selectorField}
onChange={this.fieldNamesChanged}
required
>
Then also change the state mutation on fieldNamesChanged
so that selectorField
is updated with the new value of newFieldNames
.
Finally, change your method to:
updateSelectorField = ({target}) => {
if (!this.state.selectorField.includes(target.value)) {
this.setState(prevState => ({selectorField: [...prevState.selectorField, target.value]}));
}
};
I would also remove the value
attribute from your select, since you don't want it to reflect the changes you do to the checkboxes, but to remain at whatever the user selected.
Upvotes: 1