CODEWITHSUNDEEP
javascriptreactjs
DJ2
DJ2

Reputation: 1751

React - preselect checkbox with same option selected from dropdown

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

Answers (1)

Chris
Chris

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

Related Questions