How check the state of individual checkbox in reactjs (material-table and windmill-ui)

I am having a table which will contain list of students fetched from a database. When I click each student row a modal popup will be shown containing another table of 4 rows and 3 columns. Each column in the modal will contain 4 checkboxes. When I click a checkbox I want to change the status column of that row from ‘pending’ to ‘paid’ and also the the badge property type from ‘danger’ to ‘success’. The problem is when I click a checkbox it changes all the columns status from ‘pending’ to ‘paid’ instead of just changing that single single row.

Here is my code

​

import { Table, TableBody, TableCell, Badge, TableFooter, TableRow, TableHeader, TableContainer, Input, Modal, ModalHeader, ModalBody, ModalFooter, Button, } from “@windmill/react-ui”; import MaterialTable from “material-table”; import AddBox from “@material-ui/icons/AddBox”; import ArrowDownward from “@material-ui/icons/ArrowDownward”; import Check from “@material-ui/icons/Check”; import ChevronLeft from “@material-ui/icons/ChevronLeft”; import ChevronRight from “@material-ui/icons/ChevronRight”; import Clear from “@material-ui/icons/Clear”; import DeleteOutline from “@material-ui/icons/DeleteOutline”; import Edit from “@material-ui/icons/Edit”; import FilterList from “@material-ui/icons/FilterList”; import FirstPage from “@material-ui/icons/FirstPage”; import LastPage from “@material-ui/icons/LastPage”; import Remove from “@material-ui/icons/Remove”; import SaveAlt from “@material-ui/icons/SaveAlt”; import Search from “@material-ui/icons/Search”; import ViewColumn from “@material-ui/icons/ViewColumn”; import React, { forwardRef, useState } from “react”; const Admin = () => { const [isModalOpen, setIsModalOpen] = useState(false); const [id, setId] = useState(“”); function openModal(ids) { setId(ids.studentId); setIsModalOpen(true); } function closeModal() { setIsModalOpen(false); } const tableIcons = { Add: forwardRef((props, ref) => <AddBox {…props} ref={ref} />), Check: forwardRef((props, ref) => <Check {…props} ref={ref} />), Clear: forwardRef((props, ref) => <Clear {…props} ref={ref} />), Delete: forwardRef((props, ref) => <DeleteOutline {…props} ref={ref} />), DetailPanel: forwardRef((props, ref) => ( <ChevronRight {…props} ref={ref} /> )), Edit: forwardRef((props, ref) => <Edit {…props} ref={ref} />), Export: forwardRef((props, ref) => <SaveAlt {…props} ref={ref} />), Filter: forwardRef((props, ref) => <FilterList {…props} ref={ref} />), FirstPage: forwardRef((props, ref) => <FirstPage {…props} ref={ref} />), LastPage: forwardRef((props, ref) => <LastPage {…props} ref={ref} />), NextPage: forwardRef((props, ref) => <ChevronRight {…props} ref={ref} />), PreviousPage: forwardRef((props, ref) => ( <ChevronLeft {…props} ref={ref} /> )), ResetSearch: forwardRef((props, ref) => <Clear {…props} ref={ref} />), Search: forwardRef((props, ref) => <Search {…props} ref={ref} />), SortArrow: forwardRef((props, ref) => ( <ArrowDownward {…props} ref={ref} /> )), ThirdStateCheck: forwardRef((props, ref) => ( <Remove {…props} ref={ref} /> )), ViewColumn: forwardRef((props, ref) => <ViewColumn {…props} ref={ref} />), }; const [status, setStatus] = useState(“pending”); const [badge, setBadge] = useState(“danger”); const handleClick = (e) => { //Do something if checkbox is clicked if (e.target.checked) { setStatus(“paid”); setBadge(“success”); } else { setStatus(“pending”); setBadge(“danger”); } }; // Table to be rendered in the modal function renderTable() { return ( <TableContainer> <Table> <TableHeader> <TableRow> <TableCell>Dues</TableCell> <TableCell>Amount</TableCell> <TableCell>Status</TableCell> </TableRow> </TableHeader> <TableBody> <TableRow> <TableCell> <div className=’flex items-center text-sm’> <span className=’font-semibold ml-2′>Level 100</span> </div> </TableCell> <TableCell> <span className=’text-sm’>100</span> </TableCell> <TableCell> <Badge type={badge}>{status}</Badge> <Input type=’checkbox’ className=’ml-6′ onClick={(e) => handleClick(e)} /> </TableCell> </TableRow> <TableRow> <TableCell> <div className=’flex items-center text-sm’> <span className=’font-semibold ml-2′>Level 200</span> </div> </TableCell> <TableCell> <span className=’text-sm’>100</span> </TableCell> <TableCell> <Badge type={badge}>{status}</Badge> <Input type=’checkbox’ className=’ml-6′ onClick={(e) => handleClick(e)} /> </TableCell> </TableRow> <TableRow> <TableCell> <div className=’flex items-center text-sm’> <span className=’font-semibold ml-2′>Level 300</span> </div> </TableCell> <TableCell> <span className=’text-sm’>100</span> </TableCell> <TableCell> <Badge type={badge}>{status}</Badge> <Input type=’checkbox’ className=’ml-6′ onClick={(e) => handleClick(e)} /> </TableCell> </TableRow> <TableRow> <TableCell> <div className=’flex items-center text-sm’> <span className=’font-semibold ml-2′>Level 400</span> </div> </TableCell> <TableCell> <span className=’text-sm’>100</span> </TableCell> <TableCell> <Badge type={badge}>{status}</Badge> <Input type=’checkbox’ className=’ml-6′ onClick={(e) => handleClick(e)} /> </TableCell> </TableRow> </TableBody> </Table> <TableFooter></TableFooter> </TableContainer> ); } return ( <React.Fragment> {/* Modal popup */} <Modal isOpen={isModalOpen} onClose={closeModal}> <ModalHeader>{id}</ModalHeader> <ModalBody>{renderTable()}</ModalBody> <ModalFooter> <Button className=’w-full sm:w-auto’ layout=’outline’ onClick={closeModal}> Cancel </Button> <Button className=’w-full sm:w-auto’>Accept</Button> </ModalFooter> </Modal> <MaterialTable icons={tableIcons} columns={[ { title: “Student ID”, field: “studentId” }, { title: “Level”, field: “level” }, { title: “Programme”, field: “programme” }, ]} data={[ { studentId: “UG0222021”, level: “200”, programme: “BCOM”, }, { studentId: “UG0199821”, level: “200”, programme: “BCOM”, }, ]} title=’Students Information’ onRowClick={(event, rowData) => openModal(rowData)} /> </React.Fragment> ); }; export default Admin;