Ionic React Checkbox values in state and pass values to Laravel Back-end

Ionic Framework Ionic React
1

Hello everyone, I am new to Ionic Framework. So far I have been able to develop the project and it has been amazing so far.

I am just stuck on the following code, unable to keep the checkboxes ticked/checked and pass the values to Laravel back-end.

            <Modal.Header>
              <Modal.Title><h6>Cuisines</h6></Modal.Title>
            </Modal.Header>
            <Modal.Body>
              {items.map((val: any, index: any) => <div key={val.id}>
              <IonCheckbox id={`cuisines-${val.id}`} name="cuisine" value={val.id} onIonChange={handleCheck} /> {val.title}
              </div>)}</Modal.Body>
            <Modal.Footer>                  
              <Button variant="primary" onClick={handleClose}>
                Submit
              </Button>
            </Modal.Footer>
            
          </Modal>

This is the dynamic cuisine checkbox.


const [checked, setChecked] = useState<any[]>([]);

  // Add/Remove checked item from list
const handleCheck = (event:any) => {
  var cuisineCheck = [...checked];
  if (event.target.checked) {
    cuisineCheck = [...checked, event.target.value];
  } else {
    cuisineCheck.splice(checked.indexOf(event.target.value), 1);
  }
  setChecked(cuisineCheck);
  console.log(cuisineCheck);
};

And this is the checkbox to get the list of checked cuisines.

  1. Console log shows that this works however the checkbox doesn’t stay checked.
  2. And I am not sure how to pass the data to Laravel’s back-end.
2

I’ll try to replicate this based on what you have provided, but could you throw this into a github repo (minus the backend part).

I think what could be happening here is that the state is being setup but react is trying to re-render the component.

Without more context, it sounds like something should be going on in a useEffect hook