Checkboxes - Getting starting value from state

Question

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 first run the app, if I have some states set to true, I want those checkboxes to start off rendered as checked... however they don't. Even those the state is true, they all render unchecked. I believe I'm just not getting the value to the right spot to make it check. But I'm not sure what else to try. Any help would be appreciated.

Parent Component:

class Audit extends Component {
  constructor(props) {
    super(props);

    this.state = {

      formRewardsService: true,
      formRewardsRetirement: true,
      formRewardsPeerRecognition: false,
      formRewardsSpot: false
     
    };

    this.handleCheck = this.handleCheck.bind(this);

  }

  handleCheck(e) {
    this.setState(({ isChecked }) => (
      {
        isChecked: !isChecked
      }
    ));
    console.log(e.target.name + ': ' + e.target.checked);
  }



  render() {
        return (
          <ThemeProvider theme={theme}>
            <Container>
              <Div>
                <Tabs defaultActiveKey="general" id="audit=tabs">
                  <Tab eventKey="culture" title="Culture">
                    <Culture handleCheck={this.handleCheck} { />
                  </Tab>
                </Tabs>
              </Div>
            </Container>
          </ThemeProvider>
        );
    }
    
}

export default Audit;

My Child Component with the form and checkboxes(The first two should render as checked since they are "true" to start off):

import React, { Component } from 'react';
import {Container, Form, Row, Col} from 'react-bootstrap';
import styled, { ThemeProvider } from 'styled-components';
import theme from "../../../../Config/Theme";

const Div = styled.div`
    background-color: white;
    color: black;

    
`

class Culture extends Component {
     


    render() {
        return (
          <ThemeProvider theme={theme}>
            <Div>
              <Container >
                <Form className="p-3">
                   
                    <Form.Group name="formRewards1" as={Row} controlId="formRewards1" onChange={this.props.handleCheck}>
                      <Form.Label column sm={5}>
                        1.What types of employee recognition programs are utilized within the organization?  Check all that apply. 
                    </Form.Label>
                      <Col>
                        <Form.Check
                          type="checkbox"
                          label="Service Awards"
                          value={this.props.formRewardsService}
                          name="formRewardsService"
                          id="formRewards1-1"
                          checked={this.props.value}
                        />
                        <Form.Check
                          type="checkbox"
                          label="Retirement Awards"
                          value={this.props.formRewardsRetirement}
                          name="formRewardsRetirement"
                          id="formRewards1-2"
                          checked={this.props.value}
                        />
                        <Form.Check
                          type="checkbox"
                          label="Peer Recognition Awards"
                          value={this.props.formRewardsPeer}
                          name="formRewardsPeer"
                          id="formRewards1-3"
                          checked={this.props.value}
                        />
                        <Form.Check
                          type="checkbox"
                          label="Spot Awards"
                          value={this.props.formRewardsSpot}
                          name="formRewardsSpot"
                          id="formRewards1-4"
                          checked={this.props.value}
                        />
                        
                      </Col>
                    </Form.Group>
                  </div>
                </Form>
              </Container>
            </Div>
          </ThemeProvider>
        );
    }
}

export default Culture;

Answer 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.checked
    this.setState(
      {
        ...this.state,
        checkboxes: {
          ...this.state.checkboxes,
          [name]: checked 
        }
      }
    ));
    console.log(e.target.name + ': ' + e.target.checked);
  }

Answer 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.checked
    this.setState(
      {
        [name]: checked 
      }
    ));
    console.log(e.target.name + ': ' + e.target.checked);
  }

Then you have to pass checked states to Culture props.

render() {
        return (
          <ThemeProvider theme={theme}>
            <Container>
              <Div>
                <Tabs defaultActiveKey="general" id="audit=tabs">
                  <Tab eventKey="culture" title="Culture">
                    <Culture handleCheck={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}
 />