mardi 28 avril 2020

Saving form data with dynamic checkbox count in React

I’m doing an electronic journal of students for notes about visiting. Marks should be put down in checkboxes, and then go to the database in the JSON column. I insert student data using map. After clicking Submit, I should get an array of this format

[
  { SCHEDULE_ID : ''
    DATA : [ { NUMBER : '1', isChecked : true/false},
            { NUMBER : '2', isChecked : true/false},
            { NUMBER : '3', isChecked : true/false},
            ...
            { NUMBER : EMOUNT OF ELEMENTS, isChecked : true/false}
            ]
    }
]

My React code below.


<Table aria-label='Student table'>
    <TableHead color='primary'>
        <TableRow>
            <TableCell><b>№</b></TableCell>
            <TableCell><b>Призвіще, Ім&#39;я та По-Батькові</b></TableCell>
            <TableCell align='right'><b>Наявність</b></TableCell>
        </TableRow>
    </TableHead>
    <TableBody>
            {schedule_data.map(row => (
                <TableRow key={row.STUDENT_ID}>
                    <TableCell component='th' scope='row' size='small'> {Counter()} </TableCell>
                    <Tooltip placement='right-start' title={
                        <img className={classes.photo} src={`${row.STUDENT_PHOTO}`} alt='Фото студента'/>
                    }>
                        <TableCell size='small'>
                            <NavLink to="/profile" className={classes.a}>{row.STUDENT_LAST_NAME}&nbsp;{row.STUDENT_NAME}&nbsp;{row.STUDENT_SECOND_NAME}</NavLink>
                        </TableCell>
                    </Tooltip>
                    <TableCell align='right' size='small'>
                        <Checkbox color='primary'/>
                    </TableCell>
                </TableRow>
            ))}
    </TableBody>
</Table>
<Tooltip placement='left-center' title='Зберегти'>
    <Fab className={classes.fab} color='secondary' type='submit'>
        <SaveIcon/>
    </Fab>
</Tooltip>

I tried to make a form and send data to state but got errors.




Aucun commentaire:

Enregistrer un commentaire