unable to handle multiple checks in Nested Table of Ant Design - reactjs

Question

check this code. when i check from one table it works properly.but when i check options from multiple tables it removes the data of other tables and only show current tables checked data,forEg :in my logic part when i select multiple checkbox from one table it uncheck all other tables
import axios from "axios";
import React, { useState, useEffect } from "react";
import permissions from "../Data/PermissionAPI.json";
import modules from "../Data/ModuleAPI.json";
import { Table, Row, Col, Form, Button, Checkbox } from "antd";
const TEsting = () => {
const [form] = Form.useForm();
const dData=[];
const [data, setData] = useState([]);
const [selectedRowKeys, setSelectedRowKeys] = useState([]);
const rowSelection = {
selectedRowKeys: selectedRowKeys,
onChange: (selectedRowKeys, selectedRows) => {
setSelectedRowKeys(selectedRowKeys);
console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
},
};
const Permissions = ({ moduleid }) => {
const perm = permissions.filter((item) => item.moduleid === moduleid);
return (
<Table
style={{ width: "100%" }}
pagination={false}
rowSelection={rowSelection}
rowKey={(record) => record.id}
dataSource={perm}
columns={columns}
/>
);
};
const handleSubmit = (values) => {
console.log("Submit Pressed");
};
const columns = [
{
dataIndex: "key",
key: "key",
},
{
title: "Permission",
dataIndex: "pname",
key: "pname",
},
{
title: "Description",
dataIndex: "pdesc",
key: "pname",
},
];
const DisplayModules = modules.map((item, index) => {
const module = item;
// console.log(module);
if (module === undefined) return false;
return (
<Col xxl={12} xl={12} xs={24} key={index}>
{data}
<div
style={{
backgroundColor: "#ffe8c2",
padding: 20,
margin: "20px 20px 20px 20px",
borderRadius: "10px",
}}
title={`${module.id} - ${module.modulename}`}
>
<div className="about-project">
<Permissions moduleid={module.id} />
</div>
</div>
</Col>
);
});
useEffect(() => {
setData(dData);
console.log(data);
}, []);
return (
<div style={{ backgroundColor: "#e6e6e6" }}>
<Form
style={{ width: "100%" }}
form={form}
name="editSite"
onFinish={handleSubmit}
>
<Row gutter={25}>
{DisplayModules}
<div className="add-form-action">
<Form.Item>
<Button size="large" htmlType="submit" type="primary" raised>
Save
</Button>
</Form.Item>
</div>
</Row>
</Form>
</div>
);
};
export default TEsting;
here what i want:i want checkbox Data from multiple tables in one state without empty previous state,it would be very helpful if you help in this.

Answer 1

you need to decide - what data structure you want to get at the end, after user makes his choices and checks the checkboxes:
is that something like -
{
"moduleId": "1",
"permissions": [1,4],
"moduleId": "2",
"permissions": []
}
?

Answer 2

Try this solution
const [selectedRowKeys, setSelectedRowKeys] = useState([]);
const handleSelect = (record, selected) => {
if (selected) {
setSelectedRowKeys((ids) => [...ids, record.id]);
} else {
setSelectedRowKeys((ids) => {
const index = ids.indexOf(record.id);
return [...ids.slice(0, index), ...ids.slice(index + 1)];
});
}
};
const rowSelection = {
selectedRowKeys: selectedRowKeys,
onSelect: handleSelect,
};