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

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.

              { any, index: any) => <div key={}>
              <IonCheckbox id={`cuisines-${}`} name="cuisine" value={} onIonChange={handleCheck} /> {val.title}
              <Button variant="primary" onClick={handleClose}>

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 ( {
    cuisineCheck = [...checked,];
  } else {
    cuisineCheck.splice(checked.indexOf(, 1);

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.

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