Checkmark group of checkboxes based on array values

Question

Forgive me there are a lot of questions asking this same thing but from over 10+ years ago.

Is there any way to checkmark a group of checkboxes based on an array in React? I have an array saved within state (stepThree) that I need to pulldown when a user returns to this screen within a multistep form. I'm looking for a way that the values within that array become/stay checked upon return to that screen so it shows the user their previous selections.

Current set-up explained below

---

State is opened with empty checkedBox array and stepThree initialized to pull responses later. checkedBox is eventually cloned into stepThree.

    this.state = {
      checkedBox: [],
      stepThree: this.props.getStore().stepThree,
    };

Boxes that are checked by the user are added to checkedBox array or removed if unchecked.

  handleCheckboxChange = (event) =>{
    const isChecked = event.target.value; //Grab the value of the clicked checkbox
    if (this.state.checkedBox.includes(isChecked)) {
        // If the checked value already exists in the array remove it
    } else {
        // If it does not exist, add it
    }
}

Validate and store the completed array on clicking next

    if (Object.keys(validateNewInput).every((k) => { return validateNewInput[k] === true })) {
        if (this.props.getStore().stepThreeObjects != this.state.checkedBox) { // only update store of something changed
          this.props.updateStore({
           // Store the values of checkedBox inside stepThree and run updateStore to save the responses 
          });
        } else {
           // Return an error
        }

Sample checkbox

   <label className="choice-contain">
      <span>Checkbox Sample</span>
      <input
        value="Checkbox Sample"
        name="Question 3"
        type="checkbox"
        onChange={this.handleCheckboxChange}
      />
   </label>

I've tried to create a persistCheckmark function that pulls the values of the array from stepThree and then does a comparison returning true/false like I do in the handler but since this is not an event I can't figure out how to trigger that function on return to the step.

Currently when returning to the step nothing is checked again and I believe that has to do with checkedBox being initiated as empty.

 persistCheckmark(event) {
    const isChecked = event.target.value; //Grab the value of the clicked checkbox
    if (this.state.stepThree.includes(isChecked)) {
        return true;
    } else {
        return false
    }
  }

Answer 1

Figured it out thanks to an old post here: How do I set a group of checkboxes using values?

Just updated the filter for when the component mounts

componentDidMount() {
 if (this.state.stepThree != undefined) {
  var isChecked = this.state.stepThree
  $('input[type="checkbox"]').filter(function() {
   return $.inArray(this.value, isChecked) != -1;
  }).prop('checked', true);
    } else { return }
}

and then added a ternary in the state initiation to check the storage and copy it over so it doesn't initialize as empty every time.

checkedBox: this.props.getStore().stepThree != undefined ? this.props.getStore().stepThree : [],