Checkboxes - Getting Starting Value From State

I have the following form, and the part that works is it sets the state for each option to 'true' of 'false' as I check and uncheck the boxes as expected. My problem is that when I

Solution 1:

To pass all checkboxes value from state at once, you can grab them in a sub level of state like:

state= { checkboxes : {
  formRewardsService:false,
  formRewardsRetirement :true,
  ...
}}

and then pass only checkboxes states to Culture props

<Culture handleCheck={this.handleCheck} {...this.state.checkboxes } />

And rewrite your handleCheck function like this:

handleCheck = (e) => {
    const name = e.target.name;
    const checked = e.target.checkedthis.setState(
      {
        ...this.state,
        checkboxes: {
          ...this.state.checkboxes,
          [name]: checked 
        }
      }
    ));
    console.log(e.target.name + ': ' + e.target.checked);
  }

Solution 2:

You can remove the bind function if you write function like this:

handleCheck = (e) => { ...

Then write this function to set the state properly like this:

handleCheck = (e) => {
    const name = e.target.name;
    const checked = e.target.checkedthis.setState(
      {
        [name]: checked 
      }
    ));
    console.log(e.target.name + ': ' + e.target.checked);
  }

Then you have to pass checked states to Culture props.

render() {
        return (
          <ThemeProvidertheme={theme}><Container><Div><TabsdefaultActiveKey="general"id="audit=tabs"><TabeventKey="culture"title="Culture"><CulturehandleCheck={this.handleCheck}formRewardsService={this.state.formRewardsService}... /></Tab></Tabs></Div></Container></ThemeProvider>
        );
    }

and for checkboxes:

<Form.Check
     type="checkbox"
     label="Service Awards"
     name="formRewardsService"id="formRewards1-1"
     checked={this.props.formRewardsService}
 />