Check multiple IonCheckbox

Ionic Framework Ionic React
1

Hi!
I’m trying to make a list of products items with checkboxes inside of them, creating them with something like:

products.map ((prod, i) => (
      <IonItem
        key={i.toString()}
        className="shoplist-producto-item"
        lines="full"
      >
        <IonLabel>{prod.name}</IonLabel>
        <IonCheckbox slot="start" checked={...} onIonChange={...}/>
      </IonItem>
)

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.

2

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

React Hook Form, Field Arrays - https://react-hook-form.com/advanced-usage#FieldArrays
Project: https://github.com/aaronksaunders/ionic-react-form-modal
Video: https://youtu.be/61AlrA5BXzg

3

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[] =>
    currentPedido.productos.map((prod, i) => {
      return (
        <IonItem
          key={i.toString()}
          className="shoplist-producto-item"
          lines="full"
        >
          <IonLabel>{prod.nombre}</IonLabel>
          <IonCheckbox name={`checked[${i}]`} ref={register()} slot="start" />
        </IonItem>
      );

...

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

you cannot use the ionic components like that, see the sample code I linked to: https://github.com/aaronksaunders/ionic-react-form-modal/blob/605f182783e82855ca59e8fffe45444630b58598/src/MyModal.tsx#L124