How to create dynamic array using checkbox and mapping in React JS?

I am mapping a list of formations and i would like to create a dynamic array in onChange when i select a checkbox.
The objectif is to update my organization with formations they can dispensed. do not be careful about formation.name, it was just to see if my mapping works 🙂

I would like to have something like

{
  {
     formation.id: idFormation1,
     dispensed: true
  },
  {
     formation.id: idFormation2,
     dispensed: false
  }
}

Here the code of the modal:

   <Modal
        cancelSubmitButton={cancelSubmitButton}
        title={title}
        titleButtonModal={titleButtonModal}
        submit={onSubmit}
        classModal={classes.modal}
        classButton={'button-formation ' + classes.button}
        icon={icon}
        activeIcon={activeIcon ? activeIcon : false}
        disabledModalButton={''}
        openedFunction={onOpen}
        titleButton={titleButton ? titleButton : title}
        closedFunction={closedFunction}
        classIconButton={classIconButton}>
        <Grid container spacing={1}>
          <Grid item xs={6}>
            <span className={classes.breakWord}>
              <b>Raison sociale :</b> {organization.name}
            </span>
          </Grid>
          <Grid item xs={6}>
            <span className={classes.breakWord}>
              <b>NDA :</b> {organization.activityDeclaration}
            </span>
          </Grid>
        </Grid>
        <TableContainer component={Paper}>
          <Table aria-label="collapsible table">
            <TableHead>
              <TableRow>
                <TableCell classes={{root: classes.cellWidthLarge}}>
                  Formations disponibles au catalogue
                </TableCell>
                <TableCell classes={{root: classes.cellWidthSmall}}>
                  Prix
                </TableCell>
                <TableCell classes={{root: classes.cellWidthLarge}}>
                  Date d'effet prix
                </TableCell>
                <TableCell classes={{root: classes.cellWidthLarge}}>
                  Unité
                </TableCell>
                <TableCell classes={{root: classes.cellWidthMedium}}>
                  Formations dispensées par l'organisme
                </TableCell>
                <TableCell classes={{root: classes.cellWidthSmall}}>
                  Association
                </TableCell>
              </TableRow>
            </TableHead>
            <TableBody>
              {formations && formations.length >0 && formations.map(formation => (
                  <TableRow key={formation.id}>
                    <TableCell >{formation.name}</TableCell>
                    <TableCell>{formation.name}</TableCell>
                    <TableCell>{formation.name}</TableCell>
                    <TableCell>{formation.name}</TableCell>
                    <TableCell>
                      <FormControlLabel
                          control={
                            <Checkbox
                                checked={dispensed}
                                onChange={_onChange('dispensed')}
                                name="Formations dispensées par l'organisme"
                            />
                          }
                      />
                    </TableCell>
                    <TableCell>
                      <div className={classes.flex}>
                        <Tooltip title={'Associations'}>
                          <IconButton
                              className={'button-formation'}
                              aria-label="expand row"
                              size="medium"
                              onClick={handleExpandFirstClick}>
                            <FormatListIcon />
                          </IconButton>
                        </Tooltip>
                      </div>
                    </TableCell>
                  </TableRow>
              ))}
              <TableRow>
                <TableCell style={{paddingBottom: 0, paddingTop: 0}} colSpan={6}>
                  <Collapse
                      classes={{wrapperInner: classes.borderExpand}}
                      in={openFirst}
                      timeout="auto"
                      unmountOnExit>
                  </Collapse>
                  <p>Hi</p>
                </TableCell>
              </TableRow>
            </TableBody>
          </Table>
        </TableContainer>
      </Modal>

Thank you for reading and for your help.

Have a nice day.

Ruldane.

Answer

You can pass your id to the state property and use something like

const [state, setState] = useValue([]);

function handleChange(id) {
  setState(value => value.map(item => item.id === id ? ({ ...item, dispensed: true }) : item)); 
}

// 

onChange={() => handleChange(formation.id)}