Check multiple IonCheckbox

I’m trying to make a list of products items with checkboxes inside of them, creating them with something like: ((prod, i) => (
        <IonCheckbox slot="start" checked={...} onIonChange={...}/>

I would like to check if all the checkboxes are checked or not, and I haven’t found any relevant solution with React. And I’m not sure how can I do it with useState() hooks, since the number of products can be different each time.

Any suggests?

Thank you.

I have solved this with react hook form which supports validation and field arrays…

React Hook Form, Field Arrays -

Wow! Thanks, it seems the best approach, I have never used form libraries within React.
Anyways, I got it working now but I still have only little problem.

The data that is stored from IonCheckbox is its “value” field, instead of “checked”, so when I try to evaluate the state of them I got an array of “on”.

Any idea on how to fix this? Here’s my code:

  const renderProducts = (): JSX.Element[] =>, i) => {
      return (
          <IonCheckbox name={`checked[${i}]`} ref={register()} slot="start" />


          onSubmit={handleSubmit((data) => console.log(JSON.stringify(data)))}
          <IonButton type="submit">Submit</IonButton>

you cannot use the ionic components like that, see the sample code I linked to: