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=>
Formations disponibles au catalogue
</TableCell>
<TableCell classes=>
Prix
</TableCell>
<TableCell classes=>
Date d'effet prix
</TableCell>
<TableCell classes=>
Unité
</TableCell>
<TableCell classes=>
Formations dispensées par l'organisme
</TableCell>
<TableCell classes=>
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= colSpan={6}>
<Collapse
classes=
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.
Aucun commentaire:
Enregistrer un commentaire